html, body, #app { height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden; }

.mission-play { display: inline-block; width: 22px; height: 22px; flex-shrink: 0; vertical-align: middle; }
#how-to-play { box-sizing: border-box; position: fixed; inset: 0; width: min(640px, calc(100% - 32px)); max-height: 85vh; margin: auto; padding: 28px; overflow-y: auto; border: 1px solid #ffffff1a; border-radius: 28px; background: #0f172a; color: #cbd5e1; font-family: ui-sans-serif, system-ui, sans-serif; line-height: 1.65; box-shadow: 0 20px 70px #0008; }
#how-to-play::backdrop { background: #000b; backdrop-filter: blur(4px); }
#how-to-play h2 { margin: 0 40px 16px 0; color: white; font-size: 1.5rem; font-weight: 900; }
#how-to-play h3 { margin: 20px 0 12px; color: #5ee6c5; font-size: 1.1rem; font-weight: 800; }
#how-to-play ol { list-style: decimal; padding-left: 24px; }
#how-to-play li, #how-to-play p { margin: 10px 0; }
#how-to-play strong { color: #edf0f7; }
#how-to-play .how-to-play-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 12px; color: #cbd5e1; background: #ffffff0d; font-size: 1.5rem; }
#how-to-play .how-to-play-done { margin-top: 12px; padding: 10px 24px; border-radius: 14px; background: #f4a340; color: #171009; font-weight: 800; }
#how-to-play button:focus-visible, #btn-how-to-play:focus-visible { outline: 3px solid #5ee6c5; outline-offset: 3px; }

/* ============================================================
   Tokens de design — "console de nave à noite", não azul/ciano
   genérico de gerador de UI. Âmbar como cor de ação principal
   (luz de instrumento), verde-água como acento secundário,
   vermelho-rosado reservado para perigo/Chefão.
   ============================================================ */
:root {
  --bg-void: #05060D;
  --bg-panel: #141B2E;
  --bg-panel-deep: #0A0E1A;
  --accent-amber: #F4A340;
  --accent-amber-deep: #C97A1E;
  --accent-teal: #5EE6C5;
  --accent-teal-deep: #2AA98A;
  --accent-danger: #E8496B;
  --accent-danger-deep: #B72E4C;
  --text-bright: #EDEFF7;
  --text-dim: #9CA3BE;

  --font-display: 'Orbitron', 'Arial Narrow', sans-serif;
}

/* Fonte de impacto reservada a títulos/marcos — não usada no corpo do
   texto, pra criar contraste de peso real (em vez de font-black em tudo). */
.font-display {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}

.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: rgba(10, 14, 26, 0.8); }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(94, 230, 197, 0.4); border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(94, 230, 197, 0.7); }

/* Centraliza verticalmente quando o conteúdo cabe na tela, mas vira
   alinhamento no topo (sempre navegável via scroll) quando não cabe —
   evita telas com o cabeçalho/botão "Início" inacessível em celulares
   com pouca altura útil (flexbug do justify-content:center + overflow). */
.justify-safe-center { justify-content: safe center; }

@keyframes fade-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes twinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); box-shadow: 0 0 10px rgba(255,255,255,0.8); }
}
.animate-fade-in { animation: fade-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-fade-in-up { animation: fade-in-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-twinkle { animation-name: twinkle; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }

.screen { display: none; }
.screen.active { display: flex; }

#main-content.active { display: flex; }

/* alien svg hover */
.alien-svg { transition: transform 0.3s; }
.alien-svg:hover { transform: scale(1.1); }

/* Pulinho do corpo inteiro do alien ao acertar uma questão — animação
   única (não em loop), diferente do bounce da antena. */
@keyframes alien-jump {
  0% { transform: translateY(0); }
  30% { transform: translateY(-14px); }
  50% { transform: translateY(0); }
  70% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}
.alien-jump { animation: alien-jump 0.6s ease-out; }

/* Balanço da antena quando o alien está "falando" (isTalking). Usa um
   deslocamento pequeno (em unidades do viewBox 0-100 do SVG) em vez do
   .animate-bounce padrão do Tailwind (translateY(-25%)), que empurra a
   bolinha da ponta da antena pra fora da área visível do SVG e some. */
@keyframes antenna-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.antenna-bounce { animation: antenna-bounce 1s ease-in-out infinite; }

/* ============================================================
   Ícones de linha (SVG via mask), substituindo emojis — visual de
   produto, não de rascunho gerado. Mantém a API de classes icon-*.
   ============================================================ */
/* Ícones de linha (stroke, estilo consistente) via mask-image, herdando
   cor do Tailwind (text-*) através de currentColor + background-color.
   Substituem os emojis usados antes — visual mais "produto", menos
   genérico. Mantém a mesma API de classes icon-* pra não precisar tocar
   no HTML/JS que já as referencia. */

[class^="icon-"], [class*=" icon-"] {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  background-color: currentColor;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  vertical-align: middle;
  flex-shrink: 0;
}
[class^="icon-"]::before, [class*=" icon-"]::before { content: none; }

.icon-shield-check { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.4-3 7.6-7 9-4-1.4-7-4.6-7-9V6l7-3z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.4-3 7.6-7 9-4-1.4-7-4.6-7-9V6l7-3z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }

/* Adicionado para a tela de Upgrades — dica (lâmpada) */
.icon-lightbulb { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3Cpath d='M12 2a6.5 6.5 0 00-4 11.6c.7.6 1 1.3 1 2.4h6c0-1.1.3-1.8 1-2.4A6.5 6.5 0 0012 2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3Cpath d='M12 2a6.5 6.5 0 00-4 11.6c.7.6 1 1.3 1 2.4h6c0-1.1.3-1.8 1-2.4A6.5 6.5 0 0012 2z'/%3E%3C/svg%3E"); }

/* Adicionado para o modal de escolha de idioma na 1ª visita */
.icon-globe { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 010 20 15.3 15.3 0 010-20z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 010 20 15.3 15.3 0 010-20z'/%3E%3C/svg%3E"); }

.icon-volume-2 { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='4 9 8 9 12 5.5 12 18.5 8 15 4 15'/%3E%3Cpath d='M16.5 8.5a5 5 0 010 7'/%3E%3Cpath d='M19 6a8.5 8.5 0 010 12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='4 9 8 9 12 5.5 12 18.5 8 15 4 15'/%3E%3Cpath d='M16.5 8.5a5 5 0 010 7'/%3E%3Cpath d='M19 6a8.5 8.5 0 010 12'/%3E%3C/svg%3E"); }

.icon-volume-x { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='4 9 8 9 12 5.5 12 18.5 8 15 4 15'/%3E%3Cline x1='16.5' y1='9' x2='22' y2='15'/%3E%3Cline x1='22' y1='9' x2='16.5' y2='15'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='4 9 8 9 12 5.5 12 18.5 8 15 4 15'/%3E%3Cline x1='16.5' y1='9' x2='22' y2='15'/%3E%3Cline x1='22' y1='9' x2='16.5' y2='15'/%3E%3C/svg%3E"); }

.icon-settings { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15.5a3.5 3.5 0 100-7 3.5 3.5 0 000 7z'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 11-4 0v-.09a1.65 1.65 0 00-1-1.51 1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 110-4h.09a1.65 1.65 0 001.51-1 1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 114 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 110 4h-.09a1.65 1.65 0 00-1.51 1z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15.5a3.5 3.5 0 100-7 3.5 3.5 0 000 7z'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 11-4 0v-.09a1.65 1.65 0 00-1-1.51 1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 110-4h.09a1.65 1.65 0 001.51-1 1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 114 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 110 4h-.09a1.65 1.65 0 00-1.51 1z'/%3E%3C/svg%3E"); }

.icon-cloud { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18a4.5 4.5 0 010-9 5.5 5.5 0 0110.6 1.7A3.8 3.8 0 0117.5 18H7z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18a4.5 4.5 0 010-9 5.5 5.5 0 0110.6 1.7A3.8 3.8 0 0117.5 18H7z'/%3E%3C/svg%3E"); }

.icon-coins { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 3.3l1.7 3.5 3.9.5-2.8 2.7.7 3.9-3.5-1.8-3.5 1.8.7-3.9-2.8-2.7 3.9-.5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 3.3l1.7 3.5 3.9.5-2.8 2.7.7 3.9-3.5-1.8-3.5 1.8.7-3.9-2.8-2.7 3.9-.5z'/%3E%3C/svg%3E"); }

.icon-sliders { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='6' x2='20' y2='6'/%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cline x1='4' y1='18' x2='20' y2='18'/%3E%3Ccircle cx='9' cy='6' r='2'/%3E%3Ccircle cx='16' cy='12' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='6' x2='20' y2='6'/%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cline x1='4' y1='18' x2='20' y2='18'/%3E%3Ccircle cx='9' cy='6' r='2'/%3E%3Ccircle cx='16' cy='12' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E"); }

.icon-rocket { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 3.5c3 0 6 3 6 7-2 1-4 2-6 4-2-2-3-4-4-6 2-2 3-4 4-5z'/%3E%3Cpath d='M9.5 14.5L5 16l1.5-4.5'/%3E%3Cpath d='M9.5 14.5c1 1 2 1.5 3.5 1.5l-1.5 4.5-4-1.5z'/%3E%3Ccircle cx='15.5' cy='8.5' r='1.3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 3.5c3 0 6 3 6 7-2 1-4 2-6 4-2-2-3-4-4-6 2-2 3-4 4-5z'/%3E%3Cpath d='M9.5 14.5L5 16l1.5-4.5'/%3E%3Cpath d='M9.5 14.5c1 1 2 1.5 3.5 1.5l-1.5 4.5-4-1.5z'/%3E%3Ccircle cx='15.5' cy='8.5' r='1.3'/%3E%3C/svg%3E"); }

.icon-puzzle { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.439 7.85c-.049.322.059.648.289.878l1.568 1.568c.47.47.706 1.087.706 1.704s-.235 1.233-.706 1.704l-1.611 1.611a.98.98 0 0 1-.837.276c-.47-.07-.802-.48-.968-.925a2.501 2.501 0 1 0-3.214 3.214c.446.166.855.497.925.968a.979.979 0 0 1-.276.837l-1.61 1.61a2.404 2.404 0 0 1-3.408 0l-1.568-1.568a1.026 1.026 0 0 0-.877-.29c-.493.074-.84.504-1.02.968a2.5 2.5 0 1 1-3.237-3.237c.464-.18.894-.527.967-1.02a1.026 1.026 0 0 0-.289-.877l-1.568-1.568a2.404 2.404 0 0 1 0-3.408l1.611-1.611a.98.98 0 0 1 .837-.276c.47.07.802.48.968.925a2.5 2.5 0 1 0 3.214-3.214c-.446-.166-.855-.497-.925-.968a.979.979 0 0 1 .276-.837l1.61-1.61a2.404 2.404 0 0 1 3.408 0l1.568 1.568c.23.23.556.338.877.29.493-.074.84-.504 1.02-.968a2.5 2.5 0 1 1 3.237 3.237c-.464.18-.894.527-.967 1.02Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.439 7.85c-.049.322.059.648.289.878l1.568 1.568c.47.47.706 1.087.706 1.704s-.235 1.233-.706 1.704l-1.611 1.611a.98.98 0 0 1-.837.276c-.47-.07-.802-.48-.968-.925a2.501 2.501 0 1 0-3.214 3.214c.446.166.855.497.925.968a.979.979 0 0 1-.276.837l-1.61 1.61a2.404 2.404 0 0 1-3.408 0l-1.568-1.568a1.026 1.026 0 0 0-.877-.29c-.493.074-.84.504-1.02.968a2.5 2.5 0 1 1-3.237-3.237c.464-.18.894-.527.967-1.02a1.026 1.026 0 0 0-.289-.877l-1.568-1.568a2.404 2.404 0 0 1 0-3.408l1.611-1.611a.98.98 0 0 1 .837-.276c.47.07.802.48.968.925a2.5 2.5 0 1 0 3.214-3.214c-.446-.166-.855-.497-.925-.968a.979.979 0 0 1 .276-.837l1.61-1.61a2.404 2.404 0 0 1 3.408 0l1.568 1.568c.23.23.556.338.877.29.493-.074.84-.504 1.02-.968a2.5 2.5 0 1 1 3.237 3.237c-.464.18-.894.527-.967 1.02Z'/%3E%3C/svg%3E"); }

.icon-store { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9l1-5h14l1 5'/%3E%3Cpath d='M4 9a2.5 2.5 0 005 0 2.5 2.5 0 005 0 2.5 2.5 0 005 0 2.5 2.5 0 005 0'/%3E%3Cpath d='M5 9v10h14V9'/%3E%3Cpath d='M9 19v-6h6v6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9l1-5h14l1 5'/%3E%3Cpath d='M4 9a2.5 2.5 0 005 0 2.5 2.5 0 005 0 2.5 2.5 0 005 0 2.5 2.5 0 005 0'/%3E%3Cpath d='M5 9v10h14V9'/%3E%3Cpath d='M9 19v-6h6v6'/%3E%3C/svg%3E"); }

.icon-home { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11l8-7 8 7'/%3E%3Cpath d='M6 10v9h12v-9'/%3E%3Cpath d='M10 19v-5h4v5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11l8-7 8 7'/%3E%3Cpath d='M6 10v9h12v-9'/%3E%3Cpath d='M10 19v-5h4v5'/%3E%3C/svg%3E"); }

.icon-gamepad { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='9' rx='4'/%3E%3Cline x1='7' y1='11.5' x2='7' y2='14.5'/%3E%3Cline x1='5.5' y1='13' x2='8.5' y2='13'/%3E%3Ccircle cx='16' cy='11.5' r='1'/%3E%3Ccircle cx='18' cy='14' r='1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='9' rx='4'/%3E%3Cline x1='7' y1='11.5' x2='7' y2='14.5'/%3E%3Cline x1='5.5' y1='13' x2='8.5' y2='13'/%3E%3Ccircle cx='16' cy='11.5' r='1'/%3E%3Ccircle cx='18' cy='14' r='1'/%3E%3C/svg%3E"); }

.icon-blocks { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='1'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1'/%3E%3Crect x='13' y='13' width='7' height='7' rx='1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='1'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1'/%3E%3Crect x='13' y='13' width='7' height='7' rx='1'/%3E%3C/svg%3E"); }

.icon-star { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2.5l2.8 6.1 6.7.7-5 4.6 1.4 6.6L12 17.1l-5.9 3.4 1.4-6.6-5-4.6 6.7-.7z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2.5l2.8 6.1 6.7.7-5 4.6 1.4 6.6L12 17.1l-5.9 3.4 1.4-6.6-5-4.6 6.7-.7z'/%3E%3C/svg%3E"); }

.icon-arrow-left { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='20' y1='12' x2='4' y2='12'/%3E%3Cpolyline points='10 6 4 12 10 18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='20' y1='12' x2='4' y2='12'/%3E%3Cpolyline points='10 6 4 12 10 18'/%3E%3C/svg%3E"); }

.icon-check { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12.5 10 17.5 19 6.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12.5 10 17.5 19 6.5'/%3E%3C/svg%3E"); }

.icon-shirt { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4L4 7l2 3 2-1.5V20h8V8.5L18 10l2-3-4-3-2 2h-4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4L4 7l2 3 2-1.5V20h8V8.5L18 10l2-3-4-3-2 2h-4z'/%3E%3C/svg%3E"); }

.icon-crown { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17h16l-1.5-8-4 3-2.5-5-2.5 5-4-3z'/%3E%3Cline x1='5' y1='20' x2='19' y2='20'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17h16l-1.5-8-4 3-2.5-5-2.5 5-4-3z'/%3E%3Cline x1='5' y1='20' x2='19' y2='20'/%3E%3C/svg%3E"); }

.icon-sparkles { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M11 2l1.3 4.7L17 8l-4.7 1.3L11 14l-1.3-4.7L5 8l4.7-1.3z'/%3E%3Cpath d='M18 13l.8 2.7L21.5 16.5l-2.7.8-.8 2.7-.8-2.7-2.7-.8 2.7-.8z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M11 2l1.3 4.7L17 8l-4.7 1.3L11 14l-1.3-4.7L5 8l4.7-1.3z'/%3E%3Cpath d='M18 13l.8 2.7L21.5 16.5l-2.7.8-.8 2.7-.8-2.7-2.7-.8 2.7-.8z'/%3E%3C/svg%3E"); }

.icon-trophy { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h10v5a5 5 0 01-10 0V4z'/%3E%3Cpath d='M7 5H4v2a3 3 0 003 3'/%3E%3Cpath d='M17 5h3v2a3 3 0 01-3 3'/%3E%3Cline x1='12' y1='14' x2='12' y2='18'/%3E%3Cline x1='8' y1='20' x2='16' y2='20'/%3E%3Cline x1='9' y1='18' x2='15' y2='18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h10v5a5 5 0 01-10 0V4z'/%3E%3Cpath d='M7 5H4v2a3 3 0 003 3'/%3E%3Cpath d='M17 5h3v2a3 3 0 01-3 3'/%3E%3Cline x1='12' y1='14' x2='12' y2='18'/%3E%3Cline x1='8' y1='20' x2='16' y2='20'/%3E%3Cline x1='9' y1='18' x2='15' y2='18'/%3E%3C/svg%3E"); }

.icon-refresh { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 0114-5.3M20 5v5h-5'/%3E%3Cpath d='M20 12a8 8 0 01-14 5.3M4 19v-5h5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 0114-5.3M20 5v5h-5'/%3E%3Cpath d='M20 12a8 8 0 01-14 5.3M4 19v-5h5'/%3E%3C/svg%3E"); }

.icon-map { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='3 6 9 3.5 15 6 21 3.5 21 17.5 15 20 9 17.5 3 20'/%3E%3Cline x1='9' y1='3.5' x2='9' y2='17.5'/%3E%3Cline x1='15' y1='6' x2='15' y2='20'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='3 6 9 3.5 15 6 21 3.5 21 17.5 15 20 9 17.5 3 20'/%3E%3Cline x1='9' y1='3.5' x2='9' y2='17.5'/%3E%3Cline x1='15' y1='6' x2='15' y2='20'/%3E%3C/svg%3E"); }
.icon-clock { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpolyline points='12 6.5 12 12 16 14.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpolyline points='12 6.5 12 12 16 14.5'/%3E%3C/svg%3E"); }
.icon-count { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='5' cy='6' r='2.4'/%3E%3Ccircle cx='12' cy='6' r='2.4'/%3E%3Ccircle cx='19' cy='6' r='2.4'/%3E%3Ccircle cx='8.5' cy='14' r='2.4'/%3E%3Ccircle cx='15.5' cy='14' r='2.4'/%3E%3Ccircle cx='12' cy='21' r='2.4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='5' cy='6' r='2.4'/%3E%3Ccircle cx='12' cy='6' r='2.4'/%3E%3Ccircle cx='19' cy='6' r='2.4'/%3E%3Ccircle cx='8.5' cy='14' r='2.4'/%3E%3Ccircle cx='15.5' cy='14' r='2.4'/%3E%3Ccircle cx='12' cy='21' r='2.4'/%3E%3C/svg%3E"); }

.icon-skull { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a7 7 0 00-7 7c0 2.5 1.2 4 2 5v3h2v-2h1.5v2h3v-2H16v2h2v-3c.8-1 2-2.5 2-5a7 7 0 00-7-7z'/%3E%3Ccircle cx='9.3' cy='11' r='1.3'/%3E%3Ccircle cx='14.7' cy='11' r='1.3'/%3E%3Cpath d='M11 13.5h2l-1 1.5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a7 7 0 00-7 7c0 2.5 1.2 4 2 5v3h2v-2h1.5v2h3v-2H16v2h2v-3c.8-1 2-2.5 2-5a7 7 0 00-7-7z'/%3E%3Ccircle cx='9.3' cy='11' r='1.3'/%3E%3Ccircle cx='14.7' cy='11' r='1.3'/%3E%3Cpath d='M11 13.5h2l-1 1.5z'/%3E%3C/svg%3E"); }

.icon-flame { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5c1 3 4 4.5 4 8.5a4 4 0 01-8 0c0-1.3.6-2.2 1.2-3-.2 2 .8 3 1.8 3s1.5-1 1-2c-1-1.8-1-4.5 0-6.5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5c1 3 4 4.5 4 8.5a4 4 0 01-8 0c0-1.3.6-2.2 1.2-3-.2 2 .8 3 1.8 3s1.5-1 1-2c-1-1.8-1-4.5 0-6.5z'/%3E%3C/svg%3E"); }

/* ============================================================
   Quebra de uniformidade — nem tudo com o mesmo raio de borda ou
   o mesmo glow. Overrides pontuais sobre classes Tailwind que hoje
   usam sempre o mesmo tratamento visual repetido em toda tela.
   ============================================================ */

/* Título principal (MatMask) usa a fonte de impacto em vez da sans
   padrão — é onde o "orçamento de ousadia" do design é gasto. */
#screen-home h1 {
  font-family: var(--font-display);
  letter-spacing: 0.01em;
}

/* Cards de missão: em vez do mesmo glow cinza translúcido embaixo de
   todos, cada categoria ganha uma sombra de cor própria e discreta,
   coerente com sua cor de destaque — não decoração aleatória. */
#card-path:hover { box-shadow: 0 8px 30px -8px rgba(244, 163, 64, 0.25); }
#card-lesson:hover { box-shadow: 0 8px 30px -8px rgba(94, 230, 197, 0.25); }
#card-sequence:hover { box-shadow: 0 8px 30px -8px rgba(148, 163, 184, 0.2); }

/* Botões primários (Missões, Ranking) não usam mais o mesmo par de
   gradiente azul/ciano — âmbar como ação principal, verde-água como
   ação secundária, sem gradiente decorativo genérico. */
/* Botão primário (Missões) em âmbar — ação principal do dia a dia.
   Ranking e Loja são secundários e usam o MESMO tratamento visual
   entre si (cartão escuro + borda), só o ícone muda de cor — assim
   o menu lê como um conjunto, não como 3 componentes soltos. */
#btn-missions {
  background: var(--accent-amber);
  box-shadow: 0 0 0 1px rgba(244, 163, 64, 0.3), 0 8px 20px -6px rgba(244, 163, 64, 0.4);
}
#btn-missions:hover { background: var(--accent-amber-deep); }
#btn-ranking {
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  box-shadow: none;
}
#btn-ranking .icon-trophy { color: var(--accent-teal); }
#btn-ranking:hover { background: #334155; }

/* Remove as setinhas nativas (cima/baixo) dos campos de resposta
   numéricos em todo o jogo — no Windows/Chrome elas vêm com uma caixa
   preta esquisita em volta, fora do estilo do jogo. */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
  caret-color: transparent; /* esconde o cursor piscando de texto */
}

/* Sliders de volume da tela de Configurações */
input[type="range"].volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  outline: none;
  cursor: pointer;
}
input[type="range"].volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  background: #2dd4bf;
  border: 3px solid #0f172a;
  box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.4);
  cursor: pointer;
}
input[type="range"].volume-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  background: #2dd4bf;
  border: 3px solid #0f172a;
  box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.4);
  cursor: pointer;
}
input[type="range"].volume-slider::-moz-range-track {
  height: 8px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
}

/* Modais (privacidade, configurações, anti-bot) sempre acima de QUALQUER
   outra coisa da tela — z-index puro em CSS, sem depender de classes
   arbitrárias do Tailwind (z-[60] etc.) que só existem no CSS compilado
   se já estavam no HTML/JS no momento exato do build. O anti-bot fica
   acima dos outros dois modais, caso apareçam ao mesmo tempo. */
#modal-privacy,
#modal-settings {
  z-index: 9000 !important;
}
#modal-anticheat {
  z-index: 9999 !important;
}

/* ============================================================
   Upgrade: Escudo contra erro — animaçãozinha de proteção.
   Aplicada via JS (playShieldAnimation) num container de alien,
   some sozinha depois de ~0.8s (ver setTimeout que remove a classe).
   ============================================================ */
.shield-flash {
  position: relative;
  animation: shield-pop 0.7s ease-out;
}
.shield-flash::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 9999px;
  border: 3px solid #38bdf8;
  box-shadow: 0 0 25px 6px rgba(56, 189, 248, 0.6);
  animation: shield-ring 0.7s ease-out forwards;
  pointer-events: none;
}
@keyframes shield-pop {
  0% { transform: scale(1); }
  30% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes shield-ring {
  0% { opacity: 1; transform: scale(0.7); }
  70% { opacity: 0.8; }
  100% { opacity: 0; transform: scale(1.3); }
}


/* ============================================================
   Aprendizado: seletor de operação, missão diária, progresso e ajuda visual
   ============================================================ */
.learning-panel {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px 20px;
  padding: 20px;
  border: 1px solid rgba(94, 230, 197, 0.18);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(20, 27, 46, 0.92), rgba(10, 14, 26, 0.9));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
}
.learning-practice-copy label { display: block; color: var(--text-bright); font-weight: 850; font-size: 1rem; }
.learning-practice-copy p, .learning-daily-row p { margin: 5px 0 0; color: var(--text-dim); font-size: 0.8rem; line-height: 1.45; }
.learning-practice-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
#practice-operation {
  min-width: 190px;
  padding: 10px 38px 10px 12px;
  border: 1px solid rgba(94, 230, 197, 0.35);
  border-radius: 13px;
  background: #0a0e1a;
  color: #edf0f7;
  font-weight: 750;
  outline: none;
}
#practice-operation:focus { border-color: var(--accent-teal); box-shadow: 0 0 0 3px rgba(94, 230, 197, 0.12); }
.learning-secondary-button, .learning-daily-button, .learning-dialog-done {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 13px;
  padding: 10px 14px;
  color: white;
  font-weight: 800;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
}
.learning-secondary-button { background: rgba(255,255,255,0.07); }
.learning-secondary-button:hover { background: rgba(255,255,255,0.12); border-color: rgba(94,230,197,.38); }
.learning-daily-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.learning-daily-row strong { color: #fde68a; font-size: .95rem; }
.learning-daily-button { background: linear-gradient(135deg, var(--accent-amber), var(--accent-amber-deep)); color: #171009; border-color: rgba(244,163,64,.65); }
.learning-daily-button:hover:not(:disabled), .learning-secondary-button:hover { transform: translateY(-1px); }
.learning-daily-button:disabled { cursor: default; opacity: .55; background: rgba(74,222,128,.12); color: #86efac; border-color: rgba(74,222,128,.25); }

.learning-dialog {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  width: min(620px, calc(100% - 28px));
  max-height: 86vh;
  margin: auto;
  padding: 26px;
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 26px;
  background: #0f172a;
  color: #cbd5e1;
  box-shadow: 0 24px 80px rgba(0,0,0,.58);
}
.learning-dialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(4px); }
.learning-dialog h2 { margin: 0 42px 8px 0; color: white; font-size: 1.5rem; font-weight: 900; }
.learning-dialog > p { margin: 0 0 20px; color: #94a3b8; font-size: .88rem; line-height: 1.5; }
.learning-dialog-x { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 12px; color: #cbd5e1; background: rgba(255,255,255,.06); font-size: 1.45rem; }
.learning-dialog-done { margin-top: 18px; width: 100%; background: rgba(94,230,197,.13); border-color: rgba(94,230,197,.3); }
.progress-list { display: grid; gap: 12px; }
.skill-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px 14px; padding: 13px 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; background: rgba(255,255,255,.035); }
.skill-row strong { color: #edf0f7; }
.skill-row > span { color: #5ee6c5; font-weight: 800; font-size: .8rem; text-align: right; }
.skill-row progress { grid-column: 1 / -1; width: 100%; height: 10px; overflow: hidden; border: 0; border-radius: 999px; background: #111827; accent-color: #5ee6c5; }
.skill-row progress::-webkit-progress-bar { background: #111827; border-radius: 999px; }
.skill-row progress::-webkit-progress-value { background: linear-gradient(90deg, #2aa98a, #f4a340); border-radius: 999px; }
.skill-row small { grid-column: 1 / -1; color: #7f8ba7; font-size: .74rem; }

.visual-help { width: min(100%, 520px); margin: -12px 0 18px; padding: 11px 14px; border: 1px solid rgba(94,230,197,.22); border-radius: 16px; background: rgba(94,230,197,.06); color: #dbeafe; }
.visual-help summary { cursor: pointer; color: #99f6e4; font-weight: 850; text-align: center; }
.visual-help p { margin: 10px 0; color: #cbd5e1; font-size: .88rem; text-align: center; }
.alien-groups { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 9px; padding: 8px 0 2px; font-size: 1.2rem; }
.alien-group { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px; padding: 5px 7px; border-radius: 12px; background: rgba(255,255,255,.045); }
.visual-alien { position: relative; display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; }
.visual-alien svg { width: 30px; height: 30px; }
.visual-alien.alien-crossed { opacity: .34; filter: grayscale(.85); }
.visual-alien.alien-crossed::after { content: ''; position: absolute; left: 2px; right: 2px; top: 50%; height: 2px; background: #fb7185; transform: rotate(-28deg); border-radius: 2px; }
.daily-bonus-message { min-height: 1.25rem; margin: -14px 0 16px; color: #fde68a; font-size: .82rem; font-weight: 800; }

.loading-error-card { width: min(460px, calc(100% - 32px)); padding: 28px; border: 1px solid rgba(232,73,107,.28); border-radius: 26px; background: rgba(20,27,46,.96); box-shadow: 0 24px 80px rgba(0,0,0,.55); text-align: center; }
.loading-error-icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 14px; border: 1px solid rgba(232,73,107,.4); border-radius: 16px; background: rgba(232,73,107,.12); color: #fda4af; font-size: 1.7rem; font-weight: 900; }
.loading-error-card h2 { margin: 0 0 9px; color: #fff; font-size: 1.25rem; font-weight: 900; }
.loading-error-card p { margin: 0 0 20px; color: #aeb6cc; line-height: 1.55; }
#btn-loading-retry { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 180px; padding: 12px 18px; border-radius: 14px; background: linear-gradient(135deg, var(--accent-amber), var(--accent-amber-deep)); color: #171009; font-weight: 900; }

@media (max-width: 640px) {
  .learning-panel { grid-template-columns: 1fr; padding: 17px; }
  .learning-practice-actions { justify-content: stretch; }
  #practice-operation, .learning-secondary-button { width: 100%; }
  .learning-daily-row { flex-direction: column; align-items: stretch; }
  .learning-daily-button { width: 100%; }
}

/* ============================================================
   Modo Prática
   ============================================================ */
.practice-mode-card {
  background:
    radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.12), transparent 42%),
    rgba(15, 23, 42, 0.72);
}

.practice-card-symbol {
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  border-radius: 24px;
  border: 1px solid rgba(34, 211, 238, 0.32);
  background: linear-gradient(145deg, rgba(8, 145, 178, 0.24), rgba(14, 116, 144, 0.09));
  color: #67e8f9;
  font-size: 2.5rem;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 0 24px rgba(34, 211, 238, 0.15);
}

.practice-card-symbol-large {
  width: 88px;
  height: 88px;
  flex: 0 0 auto;
  font-size: 2.8rem;
}

.learning-action-card {
  box-sizing: border-box;
  width: 100%;
  min-height: 110px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px 18px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 22px;
  background: rgba(15, 23, 42, .72);
  color: white;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, opacity .15s ease;
}

.learning-action-card:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(103, 232, 249, .4);
  background: rgba(30, 41, 59, .84);
}

.learning-action-card:focus-visible {
  outline: 3px solid rgba(103, 232, 249, .35);
  outline-offset: 3px;
}

.learning-action-card:disabled,
.learning-action-card.learning-card-complete {
  opacity: .68;
  cursor: default;
}

.learning-daily-card {
  border-color: rgba(251, 191, 36, .2);
}

.learning-action-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 15px;
  background: rgba(34, 211, 238, .09);
  color: #67e8f9;
  font-size: 1.45rem;
  font-weight: 950;
}

.learning-daily-card .learning-action-icon {
  background: rgba(251, 191, 36, .11);
  color: #fcd34d;
}

.learning-action-card strong,
.learning-action-card small,
.learning-action-card em {
  display: block;
}

.learning-action-card strong {
  color: #f8fafc;
  font-size: .98rem;
  font-weight: 900;
}

.learning-action-card small {
  margin-top: 3px;
  color: #94a3b8;
  font-size: .76rem;
  line-height: 1.45;
}

.learning-action-card em {
  margin-top: 7px;
  color: #fcd34d;
  font-size: .72rem;
  font-style: normal;
  font-weight: 850;
}

.practice-setup-card {
  box-sizing: border-box;
  padding: 26px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 32px;
  background:
    radial-gradient(circle at 88% 8%, rgba(34, 211, 238, .09), transparent 32%),
    rgba(15, 23, 42, .78);
  box-shadow: 0 22px 70px rgba(0,0,0,.34);
}

.practice-setup-heading {
  display: flex;
  align-items: center;
  gap: 18px;
}

.practice-level-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px;
  background: rgba(2, 6, 23, .52);
  color: #94a3b8;
  font-size: .78rem;
  font-weight: 750;
}

.practice-level-pill strong {
  color: #e2e8f0;
}

.practice-operation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.practice-operation-option {
  position: relative;
  min-width: 0;
  min-height: 84px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  background: rgba(2, 6, 23, .46);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.practice-operation-option:hover {
  border-color: rgba(103, 232, 249, .3);
  background: rgba(8, 145, 178, .07);
}

.practice-operation-option:has(input:checked) {
  border-color: rgba(34, 211, 238, .52);
  background: rgba(8, 145, 178, .13);
  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .06);
}

.practice-operation-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.practice-operation-option:has(input:focus-visible) {
  outline: 3px solid rgba(103, 232, 249, .35);
  outline-offset: 3px;
}

.practice-op-symbol {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background: rgba(255,255,255,.06);
  color: #67e8f9;
  font-size: 1.9rem;
  font-weight: 950;
}

.practice-op-name {
  min-width: 0;
  color: #e2e8f0;
  font-size: .95rem;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.practice-op-check {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  color: transparent;
  font-size: .8rem;
  font-weight: 950;
}

.practice-operation-option:has(input:checked) .practice-op-check {
  border-color: rgba(34, 211, 238, .7);
  background: #22d3ee;
  color: #082f49;
}

.practice-reward-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(250, 204, 21, .18);
  border-radius: 15px;
  background: rgba(250, 204, 21, .06);
  color: #cbd5e1;
  font-size: .82rem;
  font-weight: 700;
}

.practice-start-button,
.practice-finish-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  border-radius: 16px;
  font-weight: 950;
  transition: transform .15s ease, opacity .15s ease, filter .15s ease;
}

.practice-start-button {
  background: linear-gradient(135deg, #22d3ee, #14b8a6);
  color: #052f35;
  box-shadow: 0 12px 30px rgba(34, 211, 238, .16);
}

.practice-start-button:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.practice-start-button:not(:disabled):hover,
.practice-finish-button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.practice-start-arrow {
  transform: rotate(180deg);
}

.practice-live-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.practice-live-stat {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 10px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 17px;
  background: rgba(15, 23, 42, .72);
  text-align: center;
}

.practice-live-stat span:first-child {
  color: #94a3b8;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.practice-live-stat strong {
  margin-top: 2px;
  color: #f8fafc;
  font-size: 1.25rem;
  font-weight: 950;
}

.practice-live-reward strong {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #facc15;
}

.practice-finish-button {
  border: 1px solid rgba(250, 204, 21, .25);
  background: rgba(250, 204, 21, .1);
  color: #fde68a;
}

@media (max-width: 640px) {
  .practice-setup-card { padding: 20px 16px; border-radius: 26px; }
  .practice-setup-heading { align-items: flex-start; gap: 13px; }
  .practice-card-symbol-large { width: 64px; height: 64px; border-radius: 19px; font-size: 2.15rem; }
  .practice-operation-grid { grid-template-columns: 1fr; }
  .practice-operation-option { min-height: 72px; grid-template-columns: 44px minmax(0,1fr) 24px; }
  .practice-op-symbol { width: 44px; height: 44px; font-size: 1.6rem; }
  .practice-live-bar { gap: 7px; }
  .practice-live-stat { padding: 10px 5px; }
  .practice-live-stat span:first-child { font-size: .58rem; }
  .practice-live-stat strong { font-size: 1.05rem; }
}


/* ============================================================
   MatMask v1.64 — Fluxo Galáctico e feedback de progressão
   ============================================================ */
.galactic-flow-hud {
  position: relative;
  z-index: 10;
  flex: 0 0 auto;
  align-self: center;
  width: min(48rem, calc(100% - 24px));
  margin: 8px 12px 0;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(45, 212, 191, .32);
  background: linear-gradient(145deg, rgba(7, 18, 35, .94), rgba(15, 23, 42, .92));
  box-shadow: 0 10px 34px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(14px);
  pointer-events: none;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.galactic-flow-hud.hidden { display: none; }
.flow-hud-top, .flow-hud-bottom { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.flow-hud-title { display:flex; align-items:center; gap:6px; color:#99f6e4; font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; font-weight:900; }
.flow-hud-title .icon-sparkles { width:14px; height:14px; }
.flow-hud-combo { color:#fff; font-size:1.12rem; font-weight:950; }
.flow-energy-track { height:6px; margin:7px 0 5px; border-radius:999px; overflow:hidden; background:rgba(15,23,42,.95); border:1px solid rgba(255,255,255,.06); }
.flow-energy-track > span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#2dd4bf,#67e8f9,#facc15); transition:width .28s cubic-bezier(.22,1,.36,1); }
.flow-hud-bottom { color:#94a3b8; font-size:.62rem; font-weight:800; }
.flow-hud-bottom > span:last-child { color:#fde68a; display:flex; align-items:center; gap:3px; }
.flow-hud-bottom .icon-coins { width:11px; height:11px; }
.flow-event { position:absolute; right:0; top:calc(100% + 7px); white-space:nowrap; padding:6px 10px; border-radius:999px; background:rgba(15,23,42,.94); border:1px solid rgba(45,212,191,.35); color:#ccfbf1; font-size:.68rem; font-weight:950; letter-spacing:.035em; box-shadow:0 8px 25px rgba(0,0,0,.3); animation:flow-pop .3s ease both; }
.galactic-flow-hud.is-hyperdrive { border-color:rgba(250,204,21,.7); box-shadow:0 0 28px rgba(250,204,21,.13), 0 12px 35px rgba(0,0,0,.36); }
.galactic-flow-hud.is-hyperdrive .flow-hud-combo { color:#fde047; text-shadow:0 0 14px rgba(250,204,21,.45); }
.flow-hyperdrive #main-content::after { content:''; position:fixed; inset:0; pointer-events:none; z-index:3; background:radial-gradient(circle at 50% 45%, rgba(45,212,191,.055), transparent 50%); }
@keyframes flow-pop { from { opacity:0; transform:translateY(-5px) scale(.94); } to { opacity:1; transform:translateY(0) scale(1); } }

.flow-summary { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.flow-summary > div { border:1px solid rgba(45,212,191,.18); background:rgba(13,148,136,.08); border-radius:15px; padding:10px 12px; display:flex; flex-direction:column; gap:3px; }
.flow-summary span { color:#94a3b8; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.flow-summary strong { color:#99f6e4; font-size:1.05rem; font-weight:950; display:flex; align-items:center; justify-content:center; gap:4px; }
.flow-summary .icon-coins { width:14px; height:14px; }

.path-node-stars { color:#facc15; font-size:.72rem; letter-spacing:.04em; line-height:1; text-shadow:0 0 10px rgba(250,204,21,.2); }
.path-node-reward { display:flex; align-items:center; gap:3px; color:#fde68a; font-size:.65rem; font-weight:900; }
.path-node-reward .icon-coins { width:11px; height:11px; }

.boss-hit { animation:boss-hit-v164 .48s cubic-bezier(.36,.07,.19,.97); filter:brightness(1.12); }
@keyframes boss-hit-v164 { 0%,100%{transform:translateX(0) scale(1)} 20%{transform:translateX(-9px) scale(.96)} 42%{transform:translateX(8px) scale(.97)} 64%{transform:translateX(-5px) scale(.99)} 82%{transform:translateX(3px) scale(1)} }

@media (max-width: 640px) {
  .practice-live-bar { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .galactic-flow-hud { padding:8px 10px; border-radius:14px; }
  .flow-hud-title { font-size:.58rem; }
  .flow-hud-bottom { font-size:.56rem; }
}

@media (prefers-reduced-motion: reduce) {
  .flow-event, .boss-hit { animation:none !important; }
}

/* v1.65 — reserved HUD/footer rows; the game scrolls between them. */
#app {
  box-sizing: border-box;
  height: 100dvh;
  height: var(--visible-height, 100dvh);
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
#main-content {
  flex: 1 1 0%;
  min-height: 0;
  min-width: 0;
  height: auto;
  flex-direction: column;
  justify-content: flex-start;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  scroll-padding: 12px;
}
#main-content > .screen { flex-shrink: 0; }
#main-content > .gameplay-screen {
  height: auto;
  min-height: 100%;
}
.gameplay-screen > *, .game-panel > * { flex-shrink: 0; }
.gameplay-screen > :first-child { flex-wrap: wrap; gap: 8px; }
.gameplay-screen > :first-child > * { min-width: 0; }
.gameplay-screen > :first-child button { min-height: 44px; }
.gameplay-screen > :nth-child(2):not(.game-panel):not(section) { flex-wrap: wrap; gap: 8px; }
.game-panel { min-width: 0; }
.game-question { max-width: 100%; overflow-wrap: anywhere; text-align: center; }
.answer-form { flex-direction: row; align-items: stretch; min-width: 0; }
.answer-form input { min-width: 0; width: 0; flex: 1 1 0%; }
.answer-form button { flex: 0 0 auto; min-width: 56px; min-height: 48px; }
.flow-hud-title { font-size: .75rem; letter-spacing: .03em; }
.flow-hud-bottom { font-size: .75rem; gap: 12px; flex-wrap: wrap; }
.flow-hud-combo { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.flow-hud-top > *, .flow-hud-bottom > * { min-width: 0; overflow-wrap: anywhere; }
.flow-energy-track { margin: 4px 0; }
.flow-event {
  position: static;
  min-height: 1.1rem;
  margin-top: 2px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: .75rem;
  line-height: 1.1rem;
  animation: none;
}
.flow-event.is-empty { visibility: hidden; }
.app-footer {
  position: relative;
  z-index: 10;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 12px;
  background: #020617;
}
#app-version, #btn-privacy-open { position: static; }
#btn-privacy-open { min-height: 32px; }
.platform-save-notice {
  flex: 0 0 auto;
  align-self: center;
  position: relative;
  z-index: 10;
  max-width: 100%;
  padding: 8px 12px;
  background: #78350f;
  color: white;
}
.platform-save-notice[hidden] { display: none; }
[id^="modal-"] {
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
[id^="modal-"] > div { max-height: 100%; overflow-y: auto; }

@media (max-width: 640px), (max-height: 680px) {
  .gameplay-screen { padding: 10px 12px; }
  .gameplay-screen > :first-child { padding: 8px 10px; margin-bottom: 10px; }
  .gameplay-screen > :first-child button { padding: 6px 10px; }
  .game-panel { min-height: 0; padding: 16px; border-radius: 24px; }
  .game-question { font-size: clamp(1.75rem, 6vw, 2.5rem); margin-bottom: 16px; gap: 8px; }
  #practice-alien, #lesson-alien-math, #sprint-alien, #seq-alien, #boss-monster { margin-bottom: 10px; }
  :is(#practice-alien, #lesson-alien-math, #sprint-alien, #seq-alien, #boss-monster) svg { width: 76px; height: 76px; }
  .answer-form { gap: 8px; }
  .answer-form input { padding: 10px; font-size: 1.75rem; }
  .answer-form button { padding: 10px; }
  .practice-live-bar { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
  .practice-live-stat { padding: 8px 3px; border-radius: 12px; overflow-wrap: anywhere; }
  .practice-live-stat span:first-child { font-size: .625rem; letter-spacing: 0; }
  .practice-live-stat strong { font-size: 1rem; }
  #sprint-timer { font-size: 1.5rem; padding: 6px 20px; }
  #screen-sprint > :nth-child(2) { margin-bottom: 10px; }
  #boss-monster + #boss-phase-story p { font-size: 1rem; }
  #seq-boxes { gap: 8px; margin-bottom: 16px; }
  #seq-options { gap: 8px; }
}
@media (max-width: 360px) {
  .practice-live-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #screen-boss > :first-child > :nth-child(2) { order: 3; width: 100%; justify-content: center; }
}
@media (max-height: 480px) {
  .galactic-flow-hud { padding: 4px 10px; margin-top: 4px; }
  .flow-hud-title, .flow-hud-bottom, .flow-event { font-size: .6875rem; }
  .flow-hud-combo { font-size: 1rem; }
  .gameplay-screen { justify-content: flex-start; }
  .game-panel { padding: 12px; }
  :is(#practice-alien, #lesson-alien-math, #sprint-alien, #seq-alien, #boss-monster) svg { width: 48px; height: 48px; }
  /* Preserve scrolling in very short embedded players and fullscreen. */
  #main-content:has(#screen-home.active), #screen-home { overflow-y: auto; }
  #screen-home { justify-content: safe center; }
}

/* Keep the timed mode's clock beside navigation/score, outside the question. */
#screen-sprint .sprint-clock-slot { width: auto; margin: 0; order: 1; }
#screen-sprint > :first-child > :nth-child(2) { order: 2; }
@media (min-width: 641px) {
  .galactic-flow-hud { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; }
  .flow-hud-top { grid-column: 1; grid-row: 1; }
  .flow-hud-bottom { grid-column: 2; grid-row: 1; }
  .flow-energy-track { grid-column: 1 / -1; grid-row: 2; }
  .flow-event { grid-column: 1 / -1; grid-row: 3; }
}
@media (max-height: 480px) {
  .game-question { margin-bottom: 8px; }
  #sprint-alien { margin-bottom: 4px; }
}

/* v1.66 — topic settings and readable question instructions. */
.topic-settings h3 { color:#5eead4; font-size:.875rem; font-weight:800; margin-bottom:12px; }
.topic-settings > label { display:block; color:#cbd5e1; font-size:.875rem; margin-bottom:6px; }
.topic-settings select { width:100%; min-height:44px; padding:8px 12px; background:#020617; color:#fff; border:1px solid #475569; border-radius:12px; }
.topic-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:12px 0; }
.topic-option { display:flex; align-items:center; gap:8px; min-height:48px; padding:8px; color:#e2e8f0; background:#02061780; border:1px solid #334155; border-radius:12px; font-size:.875rem; }
.topic-option:has(input:checked) { border-color:#2dd4bf; }
.topic-option input { width:20px; height:20px; flex-shrink:0; accent-color:#2dd4bf; }
.topic-option[hidden], .practice-operation-option[hidden], .topic-answer-prompt[hidden] { display:none; }
.topic-note { font-size:.8125rem; color:#94a3b8; line-height:1.5; }
.topic-settings button { min-height:44px; padding:8px 12px; margin-top:8px; border:1px solid #475569; border-radius:12px; color:#e2e8f0; }
.topic-settings [role="status"] { color:#fde68a; font-size:.8125rem; }
.topic-settings :focus-visible { outline:2px solid #5eead4; outline-offset:3px; }
.topic-answer-prompt { width:100%; max-width:28rem; color:#99f6e4; background:#0d94881a; border-radius:12px; padding:10px 12px; margin:0 0 12px; font-size:.875rem; line-height:1.45; text-align:center; }
.topic-explanation { font-size:.875rem; line-height:1.6; color:#cbd5e1; overflow-wrap:anywhere; }
.topic-explanation strong { color:#6ee7b7; }
.game-question:has(#practice-num1:not(:empty)) { overflow-wrap:anywhere; }
.game-question:has(.topic-expression), #practice-num1 { max-width:100%; }
@media(max-width:360px){.topic-options{grid-template-columns:1fr;}}

.game-question.topic-question { font-size:clamp(1.5rem, 4vw, 2.25rem); line-height:1.3; gap:8px; }

/* Optional Y8 reward placement: normal game controls remain visible below. */
.y8-reward-panel { position: relative; z-index: 10; width: 100%; margin: 0 0 1rem; }
.y8-reward-panel[hidden] { display: none; }
.y8-reward-panel button { width: 100%; min-height: 48px; padding: 12px 16px; border: 1px solid #5eead4; border-radius: 16px; background: #134e4a; color: #ccfbf1; font: inherit; font-weight: 800; cursor: pointer; }
.y8-reward-panel button:hover:enabled { background: #115e59; }
.y8-reward-panel button:disabled { opacity: .6; cursor: default; }
.y8-reward-panel button:focus-visible { outline: 3px solid #fcd34d; outline-offset: 3px; }
.y8-reward-panel p { margin: 8px 0 0; color: #cbd5e1; font-size: 12px; line-height: 1.5; }
.y8-ad-active #app *, .y8-ad-active #app *::before, .y8-ad-active #app *::after { animation-play-state: paused !important; }

/* v1.77 — fit the playing area to the iframe, including short landscape players.
   Menus, explanations and dialogs retain scrolling when content needs it. */
#main-content > .screen { min-width: 0; }
#main-content > .gameplay-screen.viewport-fit {
  min-height: 0;
  height: auto;
  flex: 0 0 auto;
  justify-content: flex-start;
  margin-top: auto;
  margin-bottom: auto;
}
#screen-home > * { flex-shrink: 0; max-width: 100%; }
#screen-home > :last-child { flex-wrap: wrap; }
#screen-loading { flex: 1 1 0%; min-height: 0; height: auto; overflow-y: auto; }
#seq-boxes > div { min-width: 0; overflow-wrap: anywhere; }

@media (max-height: 680px) {
  .galactic-flow-hud { margin-top: 4px; padding: 4px 10px; }
  .flow-event.is-empty { display: none; }
  .app-footer { padding-top: 0; padding-bottom: 0; }
  #btn-privacy-open { min-height: 28px; }
  .gameplay-screen { padding: 6px 12px; }
  .gameplay-screen > :first-child { padding: 4px 8px; margin-bottom: 6px; }
  .gameplay-screen > :nth-child(2):not(.game-panel):not(section) { padding: 6px 8px; margin-bottom: 6px; }
  .game-panel { min-height: 0; padding: 12px; }
  :is(#practice-alien, #lesson-alien-math, #lesson-alien-story, #sprint-alien, #seq-alien, #boss-monster) { margin-bottom: 6px; }
  :is(#practice-alien, #lesson-alien-math, #lesson-alien-story, #sprint-alien, #seq-alien, #boss-monster) svg { width: 48px; height: 48px; }
  .game-question { margin-bottom: 8px; font-size: clamp(1.5rem, 4vw, 2.25rem); }
  #screen-playing-numbers .game-panel > h3 { margin-bottom: 8px; font-size: 1rem; }
  #seq-boxes { margin-bottom: 8px; gap: 8px; }
  #seq-boxes > div { width: 52px; height: 52px; font-size: 1.5rem; }
  #seq-options { gap: 8px; }
  #seq-options > button { min-height: 44px; padding: 6px; font-size: 1.375rem; }
  #counting-aliens { min-height: 0; margin-bottom: 8px; gap: 4px; }
  #counting-aliens svg { width: 40px; height: 40px; }
  #lesson-phase-story > div:nth-child(2) { padding: 10px; margin-bottom: 8px; }
  #lesson-phase-story p, #boss-phase-story p { font-size: 1rem; }
  #boss-phase-story > div { padding: 8px; margin-bottom: 8px; }
  #btn-resolve, #btn-boss-resolve { min-height: 44px; padding: 8px; font-size: 1rem; }
  #boss-monster { transform: none; }
  #screen-boss .game-panel > .w-full { margin-bottom: 8px; }
  .practice-live-stat { padding: 4px; }
  .practice-live-bar, #practice-playing .game-panel > p { margin-bottom: 6px; }
  #btn-practice-finish { min-height: 44px; padding: 8px; margin-top: 6px; }
}
@media (min-width: 480px) and (max-height: 680px) {
  #seq-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .galactic-flow-hud { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; }
  .flow-hud-top { grid-column: 1; grid-row: 1; }
  .flow-hud-bottom { grid-column: 2; grid-row: 1; }
  .flow-energy-track { grid-column: 1 / -1; grid-row: 2; }
  .flow-event { grid-column: 1 / -1; grid-row: 3; }
}
@media (max-height: 360px) {
  .flow-hud-top, .flow-hud-bottom { line-height: 1.2; }
  :is(#practice-alien, #lesson-alien-math, #lesson-alien-story, #sprint-alien, #seq-alien, #boss-monster) svg { width: 32px; height: 32px; }
  #seq-boxes > div { width: 44px; height: 44px; }
  #seq-options > button { line-height: 1.2; }
  #screen-playing-numbers .game-panel > h3 { line-height: 1.25; }
  .topic-answer-prompt { padding: 6px 8px; margin-bottom: 6px; }
  .game-question { line-height: 1.15; }
}
@media (min-width: 480px) and (max-height: 400px) {
  #practice-playing #practice-alien,
  #practice-playing .game-panel > [data-i18n="practice.question"] { display: none; }
  #screen-practice.viewport-fit { padding-top: 2px; padding-bottom: 2px; }
  #practice-playing .game-panel { padding: 6px; }
  .practice-live-stat { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
  .practice-live-stat strong { margin: 0; line-height: 1.2; }
  .visual-help { padding: 4px 8px; margin: 0 0 6px; }
}


/* ============================================================
   MatMask v1.80 — Y8 layout polish
   Objetivos:
   1) usar melhor a altura curta do player sem deixar o painel minúsculo;
   2) manter o gameplay visualmente centralizado;
   3) remover a barra de rolagem interna da Home;
   4) manter TODOS os botões do resumo visíveis no player da Y8.
   ============================================================ */

/* A rolagem pertence ao main-content. Evita uma barra no meio da tela,
   causada pelo overflow do container max-w-2xl da Home. */
#screen-home {
  overflow: visible !important;
  height: auto !important;
  min-height: 100%;
}

/* Gameplay: não ancora tudo no topo. O conjunto cabe no viewport curto e
   fica equilibrado entre o HUD e o rodapé. */
#main-content > .gameplay-screen.viewport-fit {
  margin-top: auto;
  margin-bottom: auto;
}

@media (min-width: 641px) and (max-height: 700px) {
  .gameplay-screen.viewport-fit {
    padding: 8px 12px;
  }

  .gameplay-screen > :first-child {
    margin-bottom: 8px;
    padding: 7px 10px;
    border-radius: 16px;
  }

  #screen-lesson > :nth-child(2),
  #screen-playing-numbers > :nth-child(2) {
    margin-bottom: 8px;
    padding: 7px 10px;
    border-radius: 16px;
  }

  /* A v1.78 zerava o min-height abaixo de 680px e o painel virava uma
     faixa pequena. Aqui ele volta a parecer a área principal do jogo. */
  #screen-lesson .game-panel,
  #screen-sprint .game-panel,
  #screen-playing-numbers .game-panel,
  #screen-counting .game-panel,
  #screen-boss .game-panel {
    min-height: 292px;
    padding: 16px 18px;
    border-radius: 28px;
    box-shadow: 0 18px 46px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.025);
  }

  :is(#lesson-alien-math, #lesson-alien-story, #sprint-alien, #seq-alien, #boss-monster) {
    margin-bottom: 10px;
  }
  :is(#lesson-alien-math, #lesson-alien-story, #sprint-alien, #seq-alien, #boss-monster) svg {
    width: 62px;
    height: 62px;
  }

  .game-question {
    margin-bottom: 14px;
    font-size: clamp(2rem, 4.5vw, 2.75rem);
  }
  .answer-form input { padding: 11px; font-size: 2rem; }
  .answer-form button { padding: 11px; }

  #lesson-phase-story > div:nth-child(2) {
    padding: 13px 16px;
    margin-bottom: 12px;
  }
  #lesson-phase-story p { font-size: 1rem; line-height: 1.45; }
  #btn-resolve, #btn-boss-resolve { min-height: 46px; padding: 9px 12px; }
}

/* Home compacta no player horizontal da Y8 sem scrollbar interna. */
@media (min-width: 641px) and (max-height: 700px) {
  #screen-home {
    justify-content: center;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  #screen-home > :not([hidden]) ~ :not([hidden]) { margin-top: 10px; }
  #screen-home > :first-child { padding: 8px 12px; }
  #screen-home > :first-child button { width: 42px; height: 42px; }
  #screen-home h1 { font-size: 2.85rem; line-height: 1; }
  #home-tagline { font-size: .95rem; }
  #screen-home > div:nth-of-type(3) { padding: 14px 16px; border-radius: 30px; }
  #home-alien svg { width: 84px; height: 84px; }
  #home-alien { line-height: 0; }
  #home-difficulty-label { margin-bottom: 6px; }
  #difficulty-buttons button { min-height: 38px; padding-top: 7px; padding-bottom: 7px; }
  #btn-missions, #btn-ranking, #btn-shop-home, #btn-upgrades-home, #btn-how-to-play {
    min-height: 46px;
    padding-top: 9px;
    padding-bottom: 9px;
  }
}

/* Resumo compacto e centralizado: sai do estado "cartão cortado" sem criar
   um segundo menu/toolbar. O usuário sempre enxerga Missões e Jogar de Novo. */
#screen-summary.summary-screen {
  box-sizing: border-box;
  min-height: 100%;
  height: auto !important;
  padding: 10px 12px;
  justify-content: center;
}
#screen-summary .summary-card {
  max-width: 31rem;
  padding: 18px 20px;
  border-radius: 28px;
  box-shadow: 0 22px 60px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.035);
}
#screen-summary .summary-title {
  margin: 0 0 3px;
  font-size: clamp(1.75rem, 4vw, 2.15rem);
  line-height: 1.1;
  text-wrap: balance;
}
#screen-summary .summary-level {
  margin: 0 0 9px;
  font-size: .8rem;
}
#screen-summary .summary-alien-wrap { margin: 0 0 9px; }
#screen-summary #summary-alien svg { width: 82px; height: 82px; }
#screen-summary #summary-stellar-badge { top: 0; right: -10px; }
#screen-summary .summary-score-card {
  width: 100%;
  margin-bottom: 9px;
  padding: 8px 12px;
  border-radius: 13px;
  font-size: .95rem;
}
#screen-summary #summary-flow-panel { margin-bottom: 9px; }
#screen-summary .flow-summary > div { padding: 7px 10px; }
#screen-summary .summary-reward-card {
  margin-bottom: 10px;
  padding: 9px 12px;
  gap: 10px;
}
#screen-summary .summary-reward-label { margin: 0; text-align: left; }
#screen-summary .summary-reward-value { font-size: 1.85rem; line-height: 1; white-space: nowrap; }
#screen-summary .summary-reward-value .icon-coins { width: 25px !important; height: 25px !important; }
#screen-summary #daily-bonus:empty { display: none; }
#screen-summary #daily-bonus { margin: 0 0 8px; }
#screen-summary .y8-reward-panel { margin-bottom: 9px; }
#screen-summary .summary-actions button { min-height: 46px; padding: 9px 12px; }

@media (max-height: 620px) and (min-width: 481px) {
  #screen-summary .summary-card { padding: 13px 16px; border-radius: 24px; }
  #screen-summary .summary-title { font-size: 1.55rem; }
  #screen-summary .summary-level { margin-bottom: 6px; }
  #screen-summary #summary-alien svg { width: 66px; height: 66px; }
  #screen-summary .summary-alien-wrap,
  #screen-summary .summary-score-card,
  #screen-summary #summary-flow-panel { margin-bottom: 6px; }
  #screen-summary .summary-score-card { padding: 6px 10px; }
  #screen-summary .flow-summary > div { padding: 5px 8px; }
  #screen-summary .summary-reward-card { margin-bottom: 7px; padding: 7px 10px; }
  #screen-summary .summary-reward-value { font-size: 1.55rem; }
  #screen-summary .summary-actions button { min-height: 42px; padding: 7px 10px; }
}

@media (max-width: 480px) {
  #screen-summary .summary-card { padding: 14px; border-radius: 24px; }
  #screen-summary .summary-actions { flex-direction: column; }
  #screen-summary .summary-reward-card { align-items: center; }
}