/* Carbono em Jogo · 8-bit com a cara da Turma do Jota.
   Marinho de fundo, creme nos cartões, laranja nos botões. A fonte pixelada
   (Press Start 2P) fica no que é "de jogo": título, relógio, placar, botões.
   Molécula, alternativas e explicações usam a fonte da plataforma, porque
   "3-etil-4-metilpent-2-eno" em pixel vira sopa no celular. */
:root{
  --marinho:#16244b; --marinho-2:#0d1631; --marinho-3:#22346a;
  --laranja:#f26b26; --acao:#e0561a; --laranja-escuro:#a63c0e;
  --creme:#f6f1ea; --creme-2:#ebe2d4; --navy:#16244b;
  --verde:#1f9e6b; --verde-escuro:#13684a; --vermelho:#e0484d; --vermelho-escuro:#9c2a2e;
  --amarelo:#ffd23f;
  --pixel:'Press Start 2P', ui-monospace, monospace;
  --texto:'Plus Jakarta Sans', system-ui, sans-serif;
  --px:4px;
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  background:var(--marinho); color:var(--creme); font-family:var(--texto);
  min-height:100dvh; -webkit-font-smoothing:antialiased; touch-action:manipulation;
}
/* Céu de fliperama: grade de pixels bem apagada e algumas "estrelas". */
.ceu{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    radial-gradient(2px 2px at 12% 18%, rgba(255,210,63,.7) 50%, transparent 51%),
    radial-gradient(2px 2px at 82% 9%, rgba(246,241,234,.6) 50%, transparent 51%),
    radial-gradient(2px 2px at 64% 72%, rgba(242,107,38,.6) 50%, transparent 51%),
    radial-gradient(2px 2px at 24% 86%, rgba(246,241,234,.5) 50%, transparent 51%);
  background-size:16px 16px, 16px 16px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}
.app{ position:relative; z-index:1; max-width:560px; margin:0 auto; padding:16px 16px calc(28px + env(safe-area-inset-bottom)); }

/* Borda em degrau: o "pixel" da moldura. */
.px-borda{
  box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--b, var(--marinho-2)),
    0 var(--px) 0 0 var(--b, var(--marinho-2)),
    calc(-1 * var(--px)) 0 0 0 var(--b, var(--marinho-2)),
    var(--px) 0 0 0 var(--b, var(--marinho-2)),
    0 calc(2 * var(--px)) 0 0 rgba(0,0,0,.35);
}
.cartao{ background:var(--creme); color:var(--navy); padding:16px; margin:var(--px); }

/* Topo */
.topo{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:4px 4px 18px; }
.marca{ display:flex; align-items:center; gap:10px; color:var(--creme); text-decoration:none; }
.marca img{ width:34px; height:34px; image-rendering:auto; }
.marca b{ font-weight:800; font-size:14px; line-height:1.05; }
.botao-som{ font-family:var(--pixel); font-size:9px; color:var(--creme); background:transparent; border:2px solid rgba(246,241,234,.35); padding:8px 9px; cursor:pointer; }

.titulo{ font-family:var(--pixel); font-size:clamp(22px, 7.4vw, 34px); line-height:1.25; margin:6px 4px 6px; color:var(--laranja);
  text-shadow:3px 3px 0 var(--marinho-2), 6px 6px 0 rgba(0,0,0,.25); letter-spacing:.5px; }
.titulo span{ color:var(--creme); }
.chamada{ font-size:15px; line-height:1.5; color:rgba(246,241,234,.85); margin:10px 4px 22px; }
.chamada b{ color:var(--amarelo); }

/* Botões */
.btn{ text-decoration:none;
  font-family:var(--pixel); font-size:12px; line-height:1.4; letter-spacing:.3px; text-transform:uppercase;
  background:var(--acao); color:#fff; border:0; padding:14px 16px; cursor:pointer; position:relative;
  --b:var(--laranja-escuro); margin:var(--px); transition:transform .05s;
}
.btn:active{ transform:translateY(3px); }
.btn:disabled{ opacity:.5; cursor:default; transform:none; }
.btn-claro{ background:var(--creme); color:var(--navy); --b:var(--marinho-2); }
.btn-verde{ background:#25d366; color:#08331b; --b:#128c47; }
.btn-bloco{ display:block; width:calc(100% - 2 * var(--px)); text-align:center; }
.btn-link{ font-family:var(--pixel); font-size:10px; color:var(--creme); background:none; border:0; padding:10px 4px; cursor:pointer; text-decoration:underline; text-underline-offset:4px; }

/* Mini jogos */
.grade{ display:grid; grid-template-columns:1fr 1fr; gap:14px 12px; }
.mini{ display:flex; flex-direction:column; text-align:left; background:var(--creme); color:var(--navy); border:0; padding:14px 12px 12px; cursor:pointer; min-height:132px; font-family:var(--texto); }
.mini:active{ transform:translateY(3px); }
.mini .n{ font-family:var(--pixel); font-size:9px; color:var(--acao); }
.mini h3{ font-size:15.5px; line-height:1.2; font-weight:800; margin:8px 0 6px; }
.mini p{ font-size:12.5px; line-height:1.35; margin:0; color:#4a5878; flex:1; }
.mini .rec{ font-family:var(--pixel); font-size:8px; margin-top:10px; color:var(--verde-escuro); }

/* HUD da partida */
.hud{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 4px 12px; }
.relogio{ font-family:var(--pixel); font-size:26px; color:var(--creme); text-shadow:3px 3px 0 var(--marinho-2); }
.relogio.alerta{ color:var(--amarelo); animation:pisca .5s steps(2) infinite; }
@keyframes pisca{ 50%{ color:var(--laranja); } }
.placar{ font-family:var(--pixel); font-size:12px; color:var(--amarelo); text-align:right; line-height:1.6; }
.placar small{ display:block; font-size:8px; color:rgba(246,241,234,.7); }
.barra{ height:10px; background:var(--marinho-2); margin:0 4px 14px; }
.barra i{ display:block; height:100%; background:var(--laranja); transition:width .25s linear; }

.pergunta{ font-size:16px; font-weight:800; line-height:1.3; margin:0 0 4px; }
.sub{ font-size:13px; color:#55627f; margin:0; }
.quadro{ position:relative; margin:10px auto 2px; }
.mol{ display:block; width:100%; height:100%; color:var(--navy); }
.halo{ transition:fill .15s, stroke .15s; }
.halo-livre{ fill:rgba(22,36,75,.08); stroke:rgba(22,36,75,.08); }
.halo-preenchido{ fill:rgba(22,36,75,.16); stroke:rgba(22,36,75,.16); }
.halo-selecionado{ fill:rgba(242,107,38,.32); stroke:rgba(242,107,38,.32); }
.halo-certo{ fill:rgba(31,158,107,.35); stroke:rgba(31,158,107,.35); }
.halo-errado{ fill:rgba(224,72,77,.3); stroke:rgba(224,72,77,.3); }
.pares{ display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:center; }
.pares figure{ margin:0; text-align:center; }
.pares figcaption{ font-family:var(--pixel); font-size:11px; margin-top:4px; }

/* Número sobre a molécula: quadradinho de pixel. */
.pino{
  position:absolute; transform:translate(-50%,-50%); min-width:26px; height:26px; padding:0 6px;
  font-family:var(--pixel); font-size:10px; display:flex; align-items:center; justify-content:center;
  border:0; cursor:pointer; white-space:nowrap; background:#fff; color:var(--navy);
  box-shadow:0 -3px 0 0 var(--navy), 0 3px 0 0 var(--navy), -3px 0 0 0 var(--navy), 3px 0 0 0 var(--navy);
}
.pino.txt{ font-family:var(--texto); font-weight:800; font-size:11.5px; }
.pino.selecionado{ background:var(--laranja); color:#fff; box-shadow:0 -3px 0 0 var(--laranja-escuro), 0 3px 0 0 var(--laranja-escuro), -3px 0 0 0 var(--laranja-escuro), 3px 0 0 0 var(--laranja-escuro), 0 0 0 7px rgba(242,107,38,.25); }
.pino.preenchido{ background:var(--navy); color:#fff; }
.pino.certo{ background:var(--verde); color:#fff; box-shadow:0 -3px 0 0 var(--verde-escuro), 0 3px 0 0 var(--verde-escuro), -3px 0 0 0 var(--verde-escuro), 3px 0 0 0 var(--verde-escuro); }
.pino.errado{ background:var(--vermelho); color:#fff; box-shadow:0 -3px 0 0 var(--vermelho-escuro), 0 3px 0 0 var(--vermelho-escuro), -3px 0 0 0 var(--vermelho-escuro), 3px 0 0 0 var(--vermelho-escuro); }

.instrucao{ font-size:13.5px; color:rgba(246,241,234,.85); margin:14px 4px 8px; }
.banco{ display:grid; gap:10px; margin:0 0 4px; }
.banco.c3{ grid-template-columns:repeat(3,1fr); }
.banco.c2{ grid-template-columns:repeat(2,1fr); }
.banco.c1{ grid-template-columns:1fr; }
.op{
  font-family:var(--texto); font-weight:800; font-size:13.5px; line-height:1.2; color:var(--navy);
  background:var(--creme); border:0; padding:11px 8px; min-height:46px; cursor:pointer; margin:var(--px);
}
.banco.c1 .op, .banco.c2.escolha .op{ text-align:left; padding:12px 12px; font-size:14.5px; }
.op:active{ transform:translateY(2px); }
.op:disabled{ cursor:default; }
.op.certa{ background:var(--verde); color:#fff; --b:var(--verde-escuro); }
.op.errada{ background:var(--vermelho); color:#fff; --b:var(--vermelho-escuro); }
.op.apagada{ opacity:.45; }
.acoes{ display:flex; gap:8px; margin-top:12px; }
.acoes .btn{ flex:1; }

.flash{ position:fixed; left:50%; top:38%; transform:translate(-50%,-50%); font-family:var(--pixel); font-size:28px; pointer-events:none; z-index:5;
  text-shadow:3px 3px 0 var(--marinho-2); animation:sobe .7s steps(6) forwards; }
.flash.bom{ color:var(--amarelo); } .flash.ruim{ color:var(--vermelho); }
@keyframes sobe{ from{ opacity:1; transform:translate(-50%,-30%);} to{ opacity:0; transform:translate(-50%,-120%);} }

/* Fim e ranking */
.grande{ font-family:var(--pixel); font-size:clamp(30px, 10vw, 44px); color:var(--amarelo); text-shadow:4px 4px 0 var(--marinho-2); margin:6px 4px 4px; }
.rotulo-px{ font-family:var(--pixel); font-size:10px; color:var(--creme); margin:22px 4px 10px; line-height:1.6; }
.ranking{ list-style:none; margin:0; padding:0; }
.ranking li{ display:flex; align-items:center; gap:10px; padding:10px 6px; border-top:2px dashed var(--creme-2); font-weight:700; font-size:15px; }
.ranking li:first-child{ border-top:0; }
.ranking .pos{ font-family:var(--pixel); font-size:11px; width:34px; text-align:right; color:#7a86a3; }
.ranking li:nth-child(1) .pos{ color:#c98a12; } .ranking li:nth-child(2) .pos{ color:#8a93a8; } .ranking li:nth-child(3) .pos{ color:#b06a3b; }
.ranking .nome{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ranking .pts{ font-family:var(--pixel); font-size:12px; }
.ranking li.eu{ background:var(--navy); color:#fff; border-top-color:transparent; }
.ranking li.eu .pos{ color:var(--amarelo); }
.abas{ display:flex; gap:6px; overflow-x:auto; padding:6px 4px 10px; scrollbar-width:none; }
.abas button{ font-family:var(--pixel); font-size:8.5px; white-space:nowrap; background:transparent; color:var(--creme); border:2px solid rgba(246,241,234,.35); padding:9px 10px; cursor:pointer; }
.abas button.ativa{ background:var(--creme); color:var(--navy); border-color:var(--creme); }
.abas.tempo{ padding:0 0 6px; }
.abas.tempo button{ flex:1; font-size:10px; padding:11px 8px; }
.sub-tempo{ font-size:13px; color:rgba(246,241,234,.8); margin:4px 4px 14px; }
.parar{ padding:10px 14px; font-size:10px; }
.explica{ margin-top:12px; }
.explica p{ font-size:14px; line-height:1.45; margin:0 0 6px; }
.explica p:last-child{ margin:0; }
.revisar li{ font-size:14px; line-height:1.45; padding:9px 0; border-top:1px solid var(--creme-2); }
.revisar li:first-child{ border-top:0; }
.revisar ul{ list-style:none; padding:0; margin:0; }
.revisar li p{ margin:0 0 4px; }
.revisar li .quadro, .revisar li .pares{ margin:8px auto 10px; }
.revisar .pino{ cursor:default; min-width:22px; height:22px; font-size:9px; }

/* Formulário */
.form label{ display:block; font-weight:800; font-size:14px; margin:12px 0 6px; }
.form input[type=text], .form input[type=tel], .form input[type=email]{
  width:100%; font:600 16px var(--texto); color:var(--navy); background:#fff; border:3px solid var(--navy); padding:11px 12px; border-radius:0; outline:none;
}
.form input:focus{ border-color:var(--acao); }
.form .erro{ color:var(--vermelho-escuro); font-size:13px; font-weight:700; min-height:0; margin:6px 0 0; }
.sim-nao{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:4px; }
.sim-nao button{ font-family:var(--pixel); font-size:11px; padding:13px 8px; border:3px solid var(--navy); background:#fff; color:var(--navy); cursor:pointer; }
.sim-nao button.on{ background:var(--navy); color:#fff; }
.oculto{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.aviso{ background:var(--vermelho); color:#fff; padding:10px 12px; font-weight:700; font-size:14px; margin:12px 4px; }
.rodape{ text-align:center; font-size:12px; color:rgba(246,241,234,.5); margin-top:28px; line-height:1.6; }
.rodape a{ color:inherit; }
@media (min-width:520px){ .grade{ gap:16px; } .mini{ min-height:140px; } }
@media (prefers-reduced-motion:reduce){ .relogio.alerta{ animation:none; } .flash{ animation-duration:.01s; } }