@font-face { font-family: "Fredoka"; src: url(fontes/fredoka-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url(fontes/fredoka-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Nunito"; src: url(fontes/nunito-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nunito"; src: url(fontes/nunito-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --ceu: #e9f6ff;
  --tinta: #2b2350;
  --suave: #5d5680;
  --roxo: #7c4dff;
  --rosa: #ff5fa2;
  --laranja: #ff9f1c;
  --amarelo: #ffd23f;
  --verde: #2ec4b6;
  --azul: #3a86ff;
  --branco: #ffffff;
  --sombra: 0 6px 0 rgba(43,35,80,.18);
  --titulo: "Fredoka", "Nunito", system-ui, sans-serif;
  --texto: "Nunito", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ceu); }
body {
  margin: 0; color: var(--tinta); font-family: var(--texto); font-size: 1.12rem; line-height: 1.6;
  background:
    radial-gradient(circle at 10% 10%, #fff7c2 0 120px, transparent 121px),
    radial-gradient(circle 3px at 20px 20px, rgba(124,77,255,.12) 98%, transparent) 0 0 / 40px 40px,
    var(--ceu);
}
a { color: var(--roxo); }
h1, h2, h3 { font-family: var(--titulo); line-height: 1.15; margin: 0; }
p { margin: 0; }

.btn {
  display: inline-block; font-family: var(--titulo); font-weight: 600; font-size: 1.05rem;
  text-decoration: none; color: var(--branco); background: var(--roxo);
  border: 3px solid var(--tinta); border-radius: 999px; padding: .55rem 1.3rem; cursor: pointer;
  box-shadow: 0 5px 0 var(--tinta); transition: transform .08s, box-shadow .08s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--tinta); color: var(--branco); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--tinta); }
.btn:focus-visible { outline: 4px solid var(--amarelo); outline-offset: 3px; }
.btn-grande { font-size: 1.3rem; padding: .8rem 1.8rem; background: var(--rosa); }
.btn-claro { background: var(--branco); color: var(--tinta); }
.btn-claro:hover { color: var(--tinta); }
.btn-entrar { background: var(--verde); }
.btn.embreve { background: #b9b4cf; }
.btn.embreve::after { content: " · em breve"; font-size: .8em; font-weight: 600; }

.topo {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  padding: .7rem clamp(1rem, 4vw, 3rem);
  background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
  border-bottom: 3px solid var(--tinta);
}
.marca { font-family: var(--titulo); font-weight: 600; font-size: 1.45rem; color: var(--tinta); text-decoration: none; display: flex; align-items: center; gap: .4rem; }
.marca b { color: var(--roxo); font-weight: 700; }
.logo { font-size: 1.7rem; }
.topo nav { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-left: auto; }
.topo nav a { color: var(--suave); text-decoration: none; font-weight: 700; }
.topo nav a:hover { color: var(--roxo); }

.hero {
  max-width: 1150px; margin: 0 auto; padding: 3.5rem clamp(1rem, 4vw, 3rem) 2.5rem;
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 2.5rem; align-items: center;
}
.selo { display: inline-block; background: var(--amarelo); border: 3px solid var(--tinta); border-radius: 999px; padding: .15rem .9rem; font-family: var(--titulo); font-weight: 600; transform: rotate(-2deg); margin-bottom: 1rem; }
h1 { font-size: clamp(2.3rem, 5.5vw, 3.8rem); font-weight: 700; }
.arco { background: linear-gradient(90deg, var(--rosa), var(--laranja), var(--verde), var(--azul), var(--roxo)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sub { font-size: 1.22rem; color: var(--suave); margin: 1.2rem 0 1.8rem; max-width: 36em; }
.acoes { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero-arte { position: relative; min-height: 360px; display: grid; place-items: center; }
.nuvem { position: absolute; background: var(--branco); border-radius: 999px; height: 46px; box-shadow: 30px -18px 0 6px var(--branco), 60px 0 0 var(--branco); }
.n1 { width: 80px; top: 30px; left: 0; animation: flutua 7s ease-in-out infinite; }
.n2 { width: 60px; bottom: 50px; right: 40px; animation: flutua 9s ease-in-out infinite reverse; }
@keyframes flutua { 50% { transform: translateX(18px); } }
.maquina { width: 240px; background: var(--roxo); border: 4px solid var(--tinta); border-radius: 26px 26px 14px 14px; padding: 14px; box-shadow: 10px 10px 0 var(--rosa); transform: rotate(3deg); }
.maquina-topo { background: var(--amarelo); border: 3px solid var(--tinta); border-radius: 12px; text-align: center; font-family: var(--titulo); font-weight: 700; padding: .3rem; letter-spacing: 1px; }
.maquina-tela { position: relative; height: 170px; margin: 12px 0; background: #1d1640; border: 3px solid var(--tinta); border-radius: 14px; overflow: hidden; }
.px { position: absolute; font-size: 2rem; }
.p1 { top: 15px; left: 20px; animation: pula 1.6s ease-in-out infinite; }
.p2 { top: 30px; right: 30px; animation: pula 1.2s ease-in-out infinite .3s; }
.p3 { bottom: 20px; left: 45%; animation: pula 2s ease-in-out infinite .6s; }
.p4 { bottom: 25px; left: 18px; animation: pula 1.4s ease-in-out infinite .9s; }
@keyframes pula { 50% { transform: translateY(-14px) rotate(8deg); } }
.maquina-painel { display: flex; align-items: center; justify-content: center; gap: 14px; }
.maquina-painel i { width: 26px; height: 26px; border-radius: 50%; background: var(--rosa); border: 3px solid var(--tinta); }
.maquina-painel b { width: 20px; height: 20px; border-radius: 50%; background: var(--verde); border: 3px solid var(--tinta); }
.maquina-painel .b2 { background: var(--amarelo); }

.bloco { max-width: 1150px; margin: 0 auto; padding: 3rem clamp(1rem, 4vw, 3rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 700; margin-bottom: 1.4rem; }
h2::after { content: ""; display: block; width: 70px; height: 8px; border-radius: 9px; margin-top: .5rem; background: linear-gradient(90deg, var(--rosa), var(--amarelo), var(--verde)); }
h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: .35rem; }
.intro { color: var(--suave); margin-bottom: 1.6rem; max-width: 46em; }

.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.destaque { margin-top: 1.6rem; background: var(--branco); border: 3px dashed var(--roxo); border-radius: 18px; padding: 1rem 1.3rem; }

.trilha { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.trilha li { position: relative; background: var(--branco); border: 3px solid var(--tinta); border-radius: 20px; padding: 2.2rem 1rem 1.2rem; box-shadow: var(--sombra); }
.trilha .num { position: absolute; top: -22px; left: 16px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: var(--titulo); font-weight: 700; font-size: 1.4rem; color: var(--branco); border: 3px solid var(--tinta); }
.c1 .num { background: var(--rosa); } .c2 .num { background: var(--laranja); } .c3 .num { background: var(--verde); } .c4 .num { background: var(--azul); } .c5 .num { background: var(--roxo); }
.trilha p { color: var(--suave); font-size: 1rem; }
.dica { margin-top: 1.6rem; background: #fff6d6; border: 3px solid var(--tinta); border-radius: 18px; padding: .9rem 1.2rem; }

.cartas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.cartas.tres { grid-template-columns: repeat(3, 1fr); }
.cartas article { background: var(--branco); border: 3px solid var(--tinta); border-radius: 20px; padding: 1.2rem; box-shadow: var(--sombra); }
.cartas article:nth-child(4n+1) { background: #ffe8f2; } .cartas article:nth-child(4n+2) { background: #e5fbf8; }
.cartas article:nth-child(4n+3) { background: #fff3dd; } .cartas article:nth-child(4n+4) { background: #eee7ff; }
.cartas span { font-size: 2rem; display: block; margin-bottom: .3rem; }
.cartas p { font-size: 1rem; color: var(--suave); }

.lab-grade { display: grid; grid-template-columns: auto 1fr; gap: 1.6rem; align-items: start; }
.lab-jogo canvas { display: block; width: 360px; max-width: 100%; height: auto; border: 4px solid var(--tinta); border-radius: 20px; background: #bfe6ff; box-shadow: var(--sombra); touch-action: none; }
.lab-jogo canvas:focus-visible { outline: 4px solid var(--amarelo); }
.lab-botoes { display: flex; gap: .7rem; justify-content: center; margin-top: 1rem; }
.codigo { margin: 0; background: #1d1640; color: #e8e4ff; border: 4px solid var(--tinta); border-radius: 20px; padding: 1.2rem 1.4rem; font: 1rem/1.55 ui-monospace, "Cascadia Mono", Consolas, monospace; overflow-x: auto; box-shadow: var(--sombra); }
.codigo .cm { color: #8f86c0; }
.codigo .ln { display: inline-block; width: 100%; border-radius: 6px; transition: background .15s; }
.codigo .ln.ativa { background: rgba(255,210,63,.35); }

.placar { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; max-width: 560px; }
.placar li { background: var(--branco); border: 3px solid var(--tinta); border-radius: 14px; padding: .55rem 1rem; font-weight: 700; color: var(--suave); }
.placar b { display: inline-block; width: 1.8rem; }
.placar .ok { background: #dcfaf6; color: var(--tinta); }
.placar .vai { background: #fff3dd; color: var(--tinta); }

.entrar { text-align: center; }
.entrar h2::after { margin-left: auto; margin-right: auto; }
.entrar p { color: var(--suave); margin-bottom: 1.4rem; }

.rodape { text-align: center; padding: 2.5rem 1rem 3rem; border-top: 3px solid var(--tinta); background: var(--branco); color: var(--suave); }
.mini { font-size: .9rem; }

@media (max-width: 980px) {
  .trilha { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
  .cartas { grid-template-columns: repeat(2, 1fr); }
  .lab-grade { grid-template-columns: 1fr; justify-items: center; }
  .codigo { width: 100%; }
}
@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; text-align: center; }
  .acoes { justify-content: center; }
  .hero-arte { min-height: 300px; }
  .duas, .cartas, .cartas.tres, .trilha { grid-template-columns: 1fr; }
  .topo nav { display: none; }
  .btn-entrar { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .px, .nuvem { animation: none; }
}