/* Web app "Meu futuro, minha carreira": mesmo tema dourado da plataforma (tema-start), em formato de aplicativo. */
.feira-app { min-height: 100vh; min-height: 100dvh; margin: 0; padding-bottom: env(safe-area-inset-bottom); }
.feira-app .atmosfera-gamer { display: none; }
.feira-app [hidden] { display: none !important; }

.feira-topo {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: #0a1020e6; backdrop-filter: blur(8px);
  border-bottom: 1px solid #e8c56a26;
}
.feira-topo img { height: 28px; width: auto; }
.feira-marca { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ouro-claro); }
.feira-voltar { background: none; border: 1px solid #e8c56a55; color: var(--ouro); border-radius: 10px; width: 38px; height: 38px; font-size: 1.1rem; cursor: pointer; }

.feira-telas { max-width: 560px; margin: 0 auto; padding: 20px 16px 40px; }
.feira-tela { display: none; animation: feira-entra .28s ease; }
.feira-tela.ativa { display: block; }
@keyframes feira-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .feira-tela { animation: none; } .girando { animation: none !important; } }
.feira-tela h1, .feira-tela h2 { outline: none; }
.feira-tela h2 { font-size: 1.55rem; line-height: 1.2; margin: 6px 0 10px; }
.feira-tela h3 { margin: 26px 0 10px; }

/* Início */
.feira-capa { text-align: center; padding: 18px 0 8px; }
.feira-capa h1 { font-size: clamp(2.2rem, 10vw, 3rem); line-height: 1.05; margin: 10px 0 14px; }
.feira-coruja { border-radius: 50%; border: 3px solid #e8c56a; box-shadow: 0 0 0 6px #e8c56a1f, 0 0 60px #e8c56a44; display: block; margin: 0 auto 16px; }
.girando { animation: feira-pulso 1.6s ease-in-out infinite; }
@keyframes feira-pulso { 50% { transform: scale(1.06); box-shadow: 0 0 0 10px #e8c56a14, 0 0 90px #4cc9ff55; } }
.feira-acoes { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; align-items: stretch; }
.feira-acoes .link-botao { align-self: center; }

/* Profissões */
.feira-busca { width: 100%; margin: 6px 0 14px; }
.feira-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.feira-chip {
  border: 1px solid #e8c56a40; background: #111a2e; color: var(--texto); border-radius: 999px; padding: 10px 14px;
  font: 600 .95rem 'Plus Jakarta Sans', sans-serif; cursor: pointer; transition: background .15s, border-color .15s;
}
.feira-chip:hover, .feira-chip:focus-visible { border-color: var(--ouro); }
.feira-chip[aria-checked="true"], .feira-opcao:has(input:checked) { background: #e8c56a; color: #0a1020; border-color: #e8c56a; }
.feira-opcao { display: inline-flex; align-items: center; gap: 8px; }
.feira-opcao input { position: absolute; opacity: 0; pointer-events: none; }
.feira-opcao:has(input:focus-visible) { outline: 2px solid var(--energia); outline-offset: 2px; }
.feira-opcao.com-amostra::before { content: ''; width: 18px; height: 18px; border-radius: 50%; background: var(--amostra); border: 2px solid #fff6; }
.feira-grupo { border: 0; padding: 0; margin: 0 0 6px; }
.feira-grupo legend { font-weight: 700; margin-bottom: 8px; }

/* Roda */
.roda { display: block; width: 100%; height: auto; }
.roda-grade { fill: none; stroke: #e8c56a26; stroke-width: 1; }
.roda-fundo { fill: #ffffff0d; }
.roda-valor { transition: d .25s ease; }
.roda-centro { fill: #0a1020; stroke: #e8c56a; stroke-width: 2; }
.roda-rotulo { fill: #c6cfdd; font: 600 15px 'Plus Jakarta Sans', sans-serif; }
.feira-roda-fixa { position: sticky; top: 62px; z-index: 5; background: #0a1020; padding: 6px 0; border-bottom: 1px solid #e8c56a1f; margin: 0 -16px 10px; }
.feira-roda-fixa .roda { max-width: 190px; margin: 0 auto; }
.roda-grande { max-width: 440px; margin: 6px auto 4px; }
.feira-nota { border-left: 4px solid var(--cor-fatia); background: #111a2e; border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.feira-nota label { display: flex; flex-direction: column; gap: 2px; }
.feira-nota-nome { font-weight: 800; }
.feira-nota-pergunta { color: var(--muted); font-size: .92rem; }
.feira-nota-linha { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.feira-nota input[type=range] { flex: 1; accent-color: var(--cor-fatia); height: 32px; }
.feira-nota output { min-width: 2ch; font: 800 1.3rem 'Sora', sans-serif; color: var(--cor-fatia); text-align: right; }

/* Resultado */
.feira-passos { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.feira-passos li { border-left: 4px solid var(--cor-fatia, var(--ouro)); background: #111a2e; border-radius: 12px; padding: 14px; }
.feira-passos p { margin: 6px 0 10px; }

/* Foto */
.feira-termo { background: #111a2e; border: 1px solid #e8c56a33; border-radius: 12px; padding: 4px 14px; max-height: 220px; overflow-y: auto; font-size: .92rem; }
.feira-codigo { font: 800 1.6rem 'JetBrains Mono', monospace; letter-spacing: .35em; text-align: center; max-width: 200px; }
.feira-previa { text-align: center; }
.feira-previa img { max-width: 160px; border-radius: 14px; border: 2px solid #e8c56a; }
.feira-form { display: flex; flex-direction: column; gap: 14px; }

/* Imagem */
.feira-gerando { text-align: center; padding: 40px 0; }
.feira-moldura { margin: 10px 0 0; border-radius: 18px; overflow: hidden; border: 3px solid #e8c56a; box-shadow: 0 18px 50px #0008, 0 0 60px #e8c56a33; }
.feira-moldura img { display: block; width: 100%; height: auto; }

.feira-aviso {
  position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 20; max-width: 528px; margin: 0 auto;
  background: #3a1c1c; color: #ffd9d2; border: 1px solid #ffb4a855; border-radius: 12px; padding: 12px 14px; box-shadow: 0 10px 30px #0008;
}

/* Telão (16:9, tela cheia) */
.telao { height: 100vh; overflow: hidden; display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 2.2vw; padding: 2.5vw; box-sizing: border-box; }
.telao h2 { font-size: 1.6vw; margin: 0 0 1vw; }
.telao .rotulo { font-size: .75vw; }
.telao-col { display: flex; flex-direction: column; min-height: 0; }
.telao-qr { background: #fff; border-radius: 1.2vw; padding: 1vw; width: 70%; align-self: center; }
.telao-qr img { display: block; width: 100%; height: auto; }
.telao-titulo { font: 800 3vw/1.05 'Sora', sans-serif; margin: 0 0 1vw; }
.telao-url { font: 700 1.3vw 'JetBrains Mono', monospace; color: var(--ouro-claro); text-align: center; margin: 1vw 0; }
.telao-codigo { text-align: center; margin-top: auto; background: #111a2e; border: 1px solid #e8c56a55; border-radius: 1vw; padding: 1vw; }
.telao-codigo strong { display: block; font: 800 5vw 'JetBrains Mono', monospace; letter-spacing: .25em; color: var(--ouro); }
.telao-numeros { display: flex; gap: 1vw; justify-content: center; }
.telao-numeros div { text-align: center; }
.telao-numeros strong { display: block; font: 800 3.2vw 'Sora', sans-serif; color: var(--ouro); }
.telao .roda { max-height: 58vh; }
.telao .roda-rotulo { font-size: 13px; }
.telao-barras { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .8vw; }
.telao-barras li { display: grid; grid-template-columns: 1fr auto; gap: .3vw 1vw; font-size: 1.1vw; }
.telao-barras .trilho { grid-column: 1 / -1; height: .7vw; background: #ffffff12; border-radius: 99px; overflow: hidden; }
.telao-barras .trilho span { display: block; height: 100%; background: linear-gradient(90deg, #b8862b, #e8c56a); border-radius: 99px; transition: width .6s ease; }
.telao-foto { position: relative; flex: 1; min-height: 0; border-radius: 1.2vw; overflow: hidden; border: 3px solid #e8c56a; background: #111a2e; margin-top: 1vw; }
.telao-foto img { width: 100%; height: 100%; object-fit: cover; transition: opacity .8s ease; }
.telao-foto figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1vw; background: linear-gradient(transparent, #0a1020ee); font: 800 1.4vw 'Sora', sans-serif; }
.telao-foto .vazio { display: grid; place-items: center; height: 100%; color: var(--muted); text-align: center; padding: 2vw; font-size: 1.1vw; }