/* Estilos-base do design do canvas (o resto está inline no HTML, como no canvas). */
body { margin: 0; background: #F5F2EA; }
a { color: #0019E8; }
a:hover { color: #0E0F1A; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

.drift { animation: fw-drift 9s linear infinite; }
.drift-slow { animation: fw-drift 14s linear infinite reverse; }
@keyframes fw-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.bob { animation: fw-bob 5s ease-in-out infinite; }
@keyframes fw-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.navlinks { display: flex; gap: 28px; align-items: center; }
@media (max-width: 760px) { .navlinks { display: none; } }
.fw-link { color: #FFFFFF; text-decoration: none; }
.fw-link:hover { color: #D7F46B; }
.fw-btn { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), filter 0.25s; }
.fw-btn:hover { filter: brightness(1.06); }
.fw-btn:active { transform: scale(0.97); }
.fw-ghost:hover { border-color: #FFFFFF !important; }
.fw-btn:focus-visible, .fw-link:focus-visible, .challenge:focus-within { outline: 3px solid #D7F46B; outline-offset: 3px; }
#onda .challenge:focus-within { outline-color: #0019E8; }

/* seletor Pomodoro/Livre */
.mode-btn { background: transparent; color: #FFFFFF; transition: background-color 0.3s, color 0.3s; }
.mode-btn[aria-pressed='true'] { background: #D7F46B; color: #2F3A05; }

/* No desktop a seção de foco fica fixa enquanto o círculo enche: ocupa a tela toda. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  [data-focus] { min-height: 100vh; display: flex; align-items: center; }
  [data-focus] .focus-inner { width: 100%; }
}

/* varredura da IA no cartão da ementa */
.scan { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, rgba(215, 244, 107, 0) 0%, rgba(215, 244, 107, 0.55) 80%, rgba(215, 244, 107, 0) 100%); transform: translateX(-110%); pointer-events: none; }

/* desafios: caixinhas iguais ao canvas, agora clicáveis */
.challenge input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.challenge .box { width: 26px; height: 26px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; border: 2px solid #2F3A05; transition: background-color 0.25s; }
.challenge .box svg { transform: scale(0); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.challenge input:checked + .box { background: #2F3A05; }
.challenge input:checked + .box svg { transform: scale(1); }
.challenge .txt { transition: opacity 0.25s; }
.challenge input:checked ~ .txt { text-decoration: line-through; opacity: 0.75; }

/* mapa de calor */
.heat-cell { aspect-ratio: 1; border-radius: 6px; background: #ECE8DC; position: relative; overflow: hidden; }
.heat-cell i { position: absolute; inset: 0; border-radius: inherit; }

/* diálogo de instalação */
.install { border: 0; padding: 0; border-radius: 30px; width: min(520px, calc(100% - 32px)); background: #F5F2EA; color: #0E0F1A; font-family: 'Figtree', system-ui, sans-serif; box-shadow: 0 40px 100px rgba(10, 13, 43, 0.4); }
.install::backdrop { background: rgba(10, 13, 43, 0.6); }
.install-body { padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.install h2 { margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 32px; letter-spacing: -0.025em; line-height: 1.05; }
.install h3 { margin: 0 0 6px; font-size: 17px; font-weight: 800; }
.install ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; line-height: 1.5; }
.install-close { align-self: flex-end; height: 48px; padding: 0 24px; border: 0; border-radius: 999px; background: #0019E8; color: #FFFFFF; font: 800 16px 'Figtree', sans-serif; cursor: pointer; }

/* palavras do título (divisão feita no JS, só para animar) */
.w { display: inline-block; }
.wm { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }

@media (prefers-reduced-motion: reduce) {
  .drift, .drift-slow, .bob { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}