/* Sistema visual do simulado ao vivo: base Vercel / Geist (escura, neutra,
   precisa, tipografia Geist, hairlines finas) com o LARANJA AWS (#ff9900) como
   acento. Compartilhado por aluno/prof/telão. Fonte Geist via Google Fonts, com
   Inter/sistema de fallback. */
:root {
  --g-bg: #0a0a0a;          /* página (near-black Geist) */
  --g-card: #141414;        /* superfície */
  --g-elev: #1c1c1c;        /* elevado / alternativa */
  --g-line: #2a2a2a;        /* hairline */
  --g-line-2: #3d3d3d;      /* hairline forte / hover */
  --g-ink: #ededed;         /* texto principal */
  --g-body: #a1a1a1;        /* secundário */
  --g-mut: #737373;         /* apagado */
  --g-accent: #ff9900;      /* AWS Smile Orange */
  --g-accent-ink: #0a0a0a;  /* texto sobre o acento */
  --g-green: #46b361;       /* acerto */
  --g-red: #e5484d;         /* erro */
  --g-font: Geist, Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --g-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---- cronômetro em anel (laranja -> vermelho) ---- */
.jtempo { position: relative; width: 84px; height: 84px; }
.jtempo.grande { width: 116px; height: 116px; }
.janel { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.jtrilho { fill: none; stroke: #1f1f1f; stroke-width: 8; }
.jprog { fill: none; stroke: var(--g-accent); stroke-width: 8; stroke-linecap: round;
  transition: stroke-dashoffset .12s linear, stroke .3s; }
.jnum { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 30px; color: var(--g-ink); font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em; font-family: var(--g-font); }
.jtempo.grande .jnum { font-size: 42px; }
.jtempo.jurg .jnum { color: var(--g-red); }
.jtempo.jurg { animation: jpulse .9s ease-in-out infinite; }
@keyframes jpulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }

/* ---- alternativas: cartão Geist com selo de letra mono ---- */
.jopts { display: flex; flex-direction: column; gap: 8px; }
.jopt {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--g-card); color: var(--g-ink); border: 1px solid var(--g-line);
  border-radius: 8px; padding: 13px 15px; font-size: 16px; font-weight: 400; line-height: 1.35;
  font-family: var(--g-font); cursor: pointer; position: relative;
  transition: border-color .12s, background .12s, transform .06s;
  -webkit-tap-highlight-color: transparent;
}
.jopt:hover { border-color: var(--g-line-2); background: #181818; }
.jopt:active { transform: translateY(1px); }
.jopt .jforma { display: none; }
.jopt .jletra { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 6px;
  background: var(--g-elev); border: 1px solid var(--g-line); color: var(--g-body);
  font-family: var(--g-mono); font-weight: 500; font-size: 14px;
  display: flex; align-items: center; justify-content: center; transition: background .12s, color .12s, border-color .12s; }
.jopt .jtxt { flex: 1; }
.jopt.sel { border-color: var(--g-accent); background: #1a1508; }
.jopt.sel .jletra { background: var(--g-accent); border-color: var(--g-accent); color: var(--g-accent-ink); }
.jopt.sel::after { content: '✓'; position: absolute; right: 14px; color: var(--g-accent); font-size: 18px; font-weight: 700; }
.jopt[disabled] { cursor: default; }

/* revelação */
.jopt.correta { border-color: var(--g-green); background: #0c1f13; }
.jopt.correta .jletra { background: var(--g-green); border-color: var(--g-green); color: #05130a; }
.jopt.correta::after { content: '✓'; position: absolute; right: 14px; color: var(--g-green); font-size: 20px; font-weight: 700; }
.jopt.errada { opacity: .45; }

/* versão "só apresentação" (telão/professor) */
.jopt.show { cursor: default; font-size: 19px; padding: 15px 17px; }
.jopt.show .jletra { width: 32px; height: 32px; font-size: 16px; }

/* ---- resultado no celular do aluno ---- */
.jsplash { text-align: center; padding: 26px 16px; border-radius: 10px; font-family: var(--g-font);
  background: var(--g-card); border: 1px solid var(--g-line); animation: jpop .28s ease-out; }
.jsplash.ok  { background: #0c1f13; border-color: var(--g-green); }
.jsplash.no  { background: #241213; border-color: var(--g-red); }
.jsplash .jico { font-size: 48px; line-height: 1; font-weight: 600; }
.jsplash.ok .jico { color: var(--g-green); }
.jsplash.no .jico { color: var(--g-red); }
.jsplash .jtit { font-size: 26px; font-weight: 600; letter-spacing: -0.03em; margin: 8px 0 2px; }
.jsplash .jsub { font-size: 15px; color: var(--g-body); }
.jsplash .jsub b { color: var(--g-ink); }
.jsplash .jpts { font-size: 36px; font-weight: 600; letter-spacing: -0.04em; margin-top: 10px;
  color: var(--g-accent); font-variant-numeric: tabular-nums; }
.jsplash .jrank { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  background: rgba(255,153,0,.12); color: var(--g-accent); border: 1px solid rgba(255,153,0,.35);
  padding: 5px 14px; border-radius: 6px; font-size: 15px; font-weight: 500; }
@keyframes jpop { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.jshake { animation: jshake .4s; }
@keyframes jshake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 50%{transform:translateX(6px)} 75%{transform:translateX(-3px)} }

/* ---- topo: cronômetro + progresso ---- */
.jtopo { display: flex; align-items: center; gap: 16px; justify-content: center; margin: 4px 0 12px; }
.jprogq { font-size: 14px; color: var(--g-mut); font-family: var(--g-font); letter-spacing: -0.01em; }
.jprogq b { color: var(--g-ink); font-size: 17px; }

/* ---- ranking com animação (FLIP) ---- */
.jrank-lista { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.jrank-row { display: flex; align-items: center; gap: 14px; padding: 10px 16px;
  background: var(--g-card); border: 1px solid var(--g-line); border-radius: 8px;
  font-family: var(--g-font); font-size: 22px; will-change: transform; }
.jrank-row .pos { width: 46px; color: var(--g-mut); font-variant-numeric: tabular-nums; }
.jrank-row .nm { flex: 1; }
.jrank-row .pt { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: -0.02em; }
.jrank-row .mv { width: 20px; text-align: center; font-size: 15px; }
.jrank-row.subiu { border-color: var(--g-green); }
.jrank-row.subiu .mv { color: var(--g-green); }
.jrank-row.desceu .mv { color: var(--g-mut); }

/* ---- distribuição (revelação, telão/professor) ---- */
.jdist { display: flex; gap: 12px; align-items: flex-end; }
.jdcol { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: var(--g-font); font-variant-numeric: tabular-nums; }
.jdbar { width: 64%; border-radius: 6px 6px 0 0; min-height: 4px; background: var(--g-elev);
  border: 1px solid var(--g-line); border-bottom: none;
  transition: height .5s cubic-bezier(.2,1,.3,1); }