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

/* ============================================================
   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); }

@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); }

/* ============================================================
   Í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"); }

.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' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='9' r='5.5'/%3E%3Cpath d='M13.5 6.4A5.5 5.5 0 1117.6 15 5.5 5.5 0 0113.5 6.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%3Ccircle cx='9' cy='9' r='5.5'/%3E%3Cpath d='M13.5 6.4A5.5 5.5 0 1117.6 15 5.5 5.5 0 0113.5 6.4z'/%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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4h3a1.5 1.5 0 010 3 1.5 1.5 0 000 3h4v4a1.5 1.5 0 01-3 0 1.5 1.5 0 000 3v3h-4a1.5 1.5 0 000-3 1.5 1.5 0 01-3 0H4v-4a1.5 1.5 0 003 0 1.5 1.5 0 010-3H4V7h3a1.5 1.5 0 013 0z'/%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='M10 4h3a1.5 1.5 0 010 3 1.5 1.5 0 000 3h4v4a1.5 1.5 0 01-3 0 1.5 1.5 0 000 3v3h-4a1.5 1.5 0 000-3 1.5 1.5 0 01-3 0H4v-4a1.5 1.5 0 003 0 1.5 1.5 0 010-3H4V7h3a1.5 1.5 0 013 0z'/%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-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. */
#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: transparent;
  border: 2px solid var(--accent-teal);
  color: var(--accent-teal);
  box-shadow: none;
}
#btn-ranking:hover { background: rgba(94, 230, 197, 0.1); }