/* Jogos da família (tabuleiro, mímica, adedonha e batata quente): só o que as brincadeiras precisam além do estilo.css.
   Tudo começa com fe-. */

/* ---------- menu e desenhos ---------- */
.fe-arte { display: block; width: 100%; height: 100%; }
.fe-apresenta {
  display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 14px; text-align: center;
  border-radius: 28px; background: var(--branco); box-shadow: var(--sombra);
}
.fe-apresenta-arte svg { display: block; width: 100%; max-height: 220px; }
.fe-apresenta-fala { margin: 0; font-size: 18px; font-weight: 700; }
.fe-apresenta-dica { margin: 0; text-align: center; color: var(--branco); font-size: 16px; font-weight: 800; }
.fe-brincadeira-emoji { background: #fce7f3; }
.fe-flutua { animation: fe-flutua 3s ease-in-out infinite; }
.fe-flutua-2 { animation-delay: -1.5s; }

/* ---------- peças comuns ---------- */
.fe-vez { font-size: 20px; }
.fe-vez-nome { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.fe-vez-nome small { font-size: 16px; opacity: .7; }
.fe-vez .chip { font-size: 22px; padding: 4px 16px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fe-placarzinho { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.fe-ponto {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 12px; border-radius: 999px;
  background: var(--branco); border: 3px solid var(--cor); font-size: 15px; font-weight: 700; transition: transform .2s;
}
.fe-ponto b { max-width: 8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fe-ponto-vez { background: var(--cor); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .35); transform: scale(1.06); }
.fe-rodada { text-align: center; color: var(--branco); font-size: 18px; font-weight: 800; text-shadow: 0 2px 0 rgba(0, 0, 0, .15); }
.fe-dica { margin: 0; text-align: center; color: var(--branco); font-size: 16px; font-weight: 700; }
.fe-painel {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px; text-align: center;
  border-radius: 28px; background: var(--branco); box-shadow: var(--sombra);
}
.fe-painel h2 { margin: 0; font-size: 24px; }
.fe-painel h3 { margin: 4px 0 0; font-size: 19px; }
.fe-painel p { margin: 0; font-size: 17px; }
.fe-escolhas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.fe-escolha-chip {
  padding: 10px 16px; border-radius: 999px; background: #ede9fe; color: var(--roxo-escuro);
  font-size: 17px; font-weight: 800; border: 3px solid transparent;
}
.fe-ligado { background: var(--roxo); color: #fff; border-color: #fde047; }
.fe-selo-dourado { display: inline-block; padding: 4px 12px; border-radius: 999px; background: #facc15; color: #713f12; font-size: 15px; font-weight: 900; }
.fe-dourada { border-color: #facc15 !important; background: linear-gradient(#fffbeb, #fef3c7) !important; }
.fe-relogio { font-size: 46px; font-weight: 900; line-height: 1; color: var(--roxo-escuro); flex: none; font-variant-numeric: tabular-nums; }
.fe-acabando { color: #ef4444; animation: fe-pulsa .5s ease-in-out infinite; }

/* Cartão por cima da tela (pergunta, desafio, surpresa, prenda...). */
.fe-cartao { border-top: 12px solid var(--cor, var(--roxo)); }
.fe-cartao-topo { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.fe-tag { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--cor, var(--roxo)); color: #fff; font-size: 15px; font-weight: 800; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); }
.fe-tag-clara { background: #ede9fe; color: var(--roxo-escuro); text-shadow: none; }
.fe-cartao-emoji { font-size: 72px; line-height: 1.1; }
.fe-cartao-quem { font-size: 18px; font-weight: 800; }
.fe-cartao-quem .chip { font-size: 20px; }
.janela-caixa .fe-cartao-texto { font-size: 22px; font-weight: 800; }
.janela-caixa .fe-cartao-pergunta { font-size: 23px; font-weight: 800; line-height: 1.25; }
.janela-caixa .fe-cartao-nota { font-size: 17px; font-weight: 700; opacity: .8; }
.fe-opcoes .opcao { min-height: 58px; font-size: 18px; }
.fe-resultado { padding: 10px 12px; border-radius: 16px; font-size: 19px; font-weight: 800; }
.fe-resultado-sim { background: #dcfce7; color: #166534; }
.fe-resultado-nao { background: #ffedd5; color: #9a3412; }
.fe-continuar { align-self: center; }
.fe-polegares { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fe-polegar {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px; border-radius: 22px;
  color: #fff; font-size: 17px; font-weight: 900; line-height: 1.15; text-shadow: 0 2px 0 rgba(0, 0, 0, .2);
}
.fe-polegar span { font-size: 44px; }
.fe-polegar:active { transform: translateY(4px); }
.fe-polegar-sim { background: #22c55e; box-shadow: 0 6px 0 #15803d; }
.fe-polegar-nao { background: #ef4444; box-shadow: 0 6px 0 #b91c1c; }
.fe-escolher { display: flex; flex-direction: column; gap: 8px; }
.fe-escolha {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px;
  border-radius: 18px; border: 3px solid var(--cor); background: var(--branco); font-size: 18px;
}
.fe-escolha:active { transform: scale(.98); }
.fe-escolha small { font-size: 15px; font-weight: 800; opacity: .7; }

/* ---------- Tabuleiro do Saber ---------- */
.fe-cabeca { display: flex; flex-direction: column; gap: 8px; }
.fe-mesa { display: flex; justify-content: center; }
.fe-tabuleiro {
  display: block; width: min(100%, max(260px, calc((100vh - 300px) * .6667))); height: auto; aspect-ratio: 360 / 540;
  filter: drop-shadow(0 6px 0 rgba(42, 26, 94, .2)); touch-action: manipulation;
}
.fe-peao { transition: transform .28s cubic-bezier(.3, 1.4, .5, 1); }
.fe-peao-dentro { transform-box: fill-box; transform-origin: 50% 100%; }
.fe-peao-vez .fe-peao-dentro { animation: fe-pula-peao .7s ease-in-out infinite; }
.fe-peao-vez .fe-peao-bola { stroke: #fde047; stroke-width: 3.5; }
.fe-controles {
  display: flex; align-items: center; gap: 14px; padding: 10px 14px;
  border-radius: 24px; background: var(--branco); box-shadow: var(--sombra);
}
.fe-dado {
  width: 104px; height: 104px; flex: none; padding: 12px; border-radius: 24px; background: #fff;
  border: 5px solid var(--cor, var(--roxo)); box-shadow: 0 6px 0 rgba(42, 26, 94, .3);
}
.fe-dado:disabled { opacity: 1; }
.fe-dado-face { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); width: 100%; height: 100%; }
.fe-dado-face i { width: 17px; height: 17px; margin: auto; border-radius: 50%; background: var(--tinta); visibility: hidden; }
.fe-dado-face i.fe-pinta { visibility: visible; }
.fe-dado-pronto { animation: fe-chama 1.2s ease-in-out infinite; }
.fe-rolando { animation: fe-rola .3s linear infinite; }
.fe-caiu { animation: fe-surge .45s cubic-bezier(.2, 1.6, .4, 1); }
.fe-recado { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fe-recado strong { font-size: 24px; line-height: 1.15; }
.fe-recado small { font-size: 16px; opacity: .8; }
.fe-recado .fe-tirou { font-size: 32px; color: var(--roxo-escuro); }
.fe-legenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.fe-legenda span { padding: 3px 10px; border-radius: 999px; background: var(--branco); border-left: 6px solid var(--cor); font-size: 14px; font-weight: 800; }

/* ---------- Mímica ---------- */
.fe-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; width: 100%; }
.fe-time {
  display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; text-align: left;
  border-radius: 16px; background: #f8fafc; border-left: 10px solid var(--cor);
}
.fe-time strong { font-size: 17px; }
.fe-time .chip { margin: 2px; font-size: 14px; }
.fe-passe {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 18px; text-align: center;
  border-radius: 30px; background: var(--cor); color: #fff; box-shadow: 0 8px 0 var(--escura);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .28);
}
.fe-passe p { margin: 0; font-size: 21px; font-weight: 800; }
.fe-passe-emoji { font-size: 64px; line-height: 1; animation: fe-balanca 1.4s ease-in-out infinite; }
.fe-passe-nome .chip {
  max-width: 100%; padding: 6px 22px; font-size: clamp(26px, 8vw, 36px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: #fff; color: var(--escura); text-shadow: none; box-shadow: 0 4px 0 rgba(0, 0, 0, .2);
}
.fe-passe .fe-passe-time { font-size: 18px; opacity: .95; }
.fe-passe .fe-passe-aviso { padding: 8px 16px; border-radius: 999px; background: rgba(0, 0, 0, .22); }
.fe-ver { margin-top: 6px; font-size: 24px; text-shadow: none; }
.fe-terminar, .fe-todos-zero { align-self: center; background: rgba(255, 255, 255, .25); color: #fff; box-shadow: none; }
.fe-cabeca-mimica {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 16px;
  border-radius: 20px; background: var(--branco); border-left: 12px solid var(--cor); box-shadow: var(--sombra);
  font-size: 20px; font-weight: 800;
}
.fe-carta {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 250px;
  padding: 20px 16px; text-align: center; border-radius: 30px; background: var(--branco); border: 6px solid #ede9fe; box-shadow: var(--sombra);
}
.fe-carta-emoji { font-size: 92px; line-height: 1.1; }
.fe-carta-pequenos .fe-carta-emoji { font-size: 128px; }
.fe-carta-texto { font-size: clamp(28px, 8vw, 40px); line-height: 1.15; overflow-wrap: anywhere; }
.fe-carta small { font-size: 16px; font-weight: 800; opacity: .65; }
.fe-vira { animation: fe-vira .35s ease-out; }
.fe-contador { text-align: center; color: var(--branco); font-size: 20px; font-weight: 800; }
.fe-acoes { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; }
.fe-acao {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 8px; border-radius: 24px;
  color: #fff; font-size: 21px; font-weight: 900; text-shadow: 0 2px 0 rgba(0, 0, 0, .2);
}
.fe-acao span { font-size: 40px; line-height: 1.1; }
.fe-acao:active:not(:disabled) { transform: translateY(4px); }
.fe-pular { background: #f97316; box-shadow: 0 6px 0 #c2410c; }
.fe-acertou { background: #22c55e; box-shadow: 0 6px 0 #15803d; }
.fe-feitas { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-height: 30vh; overflow: auto; }
.fe-feitas span { padding: 3px 10px; border-radius: 999px; font-size: 14px; font-weight: 700; }
.fe-feita-sim { background: #dcfce7; }
.fe-feita-nao { background: #f1f5f9; opacity: .75; }

/* ---------- Adedonha ---------- */
.fe-categorias { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.fe-cat {
  display: flex; align-items: center; gap: 8px; padding: 12px; text-align: left; line-height: 1.15;
  border-radius: 18px; background: rgba(255, 255, 255, .28); color: #fff; font-size: 16px; font-weight: 800; border: 3px solid transparent;
}
.fe-cat span { font-size: 26px; flex: none; }
.fe-cat.fe-ligado { background: var(--branco); color: var(--roxo-escuro); border-color: #fde047; }
.fe-sorteio {
  display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px;
  border-radius: 30px; background: var(--branco); box-shadow: var(--sombra);
}
.fe-sorteio p { margin: 0; font-size: 20px; font-weight: 800; }
.fe-letra {
  display: grid; place-items: center; width: 170px; height: 170px; border-radius: 34px;
  background: linear-gradient(#8b5cf6, #6d4ce0); color: #fff; font-size: 120px; font-weight: 900; line-height: 1;
  box-shadow: 0 8px 0 #4c2fb0; text-shadow: 0 4px 0 rgba(0, 0, 0, .25);
}
.fe-girando { animation: fe-treme .15s linear infinite; }
.fe-parou { animation: fe-surge .5s cubic-bezier(.2, 1.6, .4, 1); }
.fe-letra-pequena { flex: none; width: 72px; height: 72px; border-radius: 18px; font-size: 52px; box-shadow: 0 4px 0 #4c2fb0; }
.fe-letra-mini { flex: none; width: 52px; height: 52px; border-radius: 14px; font-size: 36px; box-shadow: 0 3px 0 #4c2fb0; }
.fe-escrever {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-radius: 22px; background: var(--branco); box-shadow: var(--sombra);
}
.fe-escrever > div:nth-child(2) { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.fe-escrever strong { font-size: 20px; }
.fe-escrever small { font-size: 15px; }
.fe-lista-cat { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.fe-lista-cat span { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .92); font-size: 16px; font-weight: 800; }
.fe-stop {
  align-self: center; width: min(58vw, 220px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #f87171, #dc2626); color: #fff; border: 8px solid #fff;
  font-size: clamp(40px, 12vw, 60px); font-weight: 900; letter-spacing: 1px; text-shadow: 0 4px 0 rgba(0, 0, 0, .25);
  box-shadow: 0 8px 0 #991b1b, 0 14px 30px rgba(0, 0, 0, .25);
}
.fe-stop:active { transform: translateY(6px); box-shadow: 0 2px 0 #991b1b; }
.fe-painel-cat { padding: 14px; }
.fe-cat-grande { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.fe-cat-grande > span:first-child { font-size: 44px; }
.fe-cat-grande strong { font-size: 25px; line-height: 1.15; }
.fe-dica-notas b { padding: 0 8px; border-radius: 8px; background: #fff; color: var(--roxo-escuro); }
.fe-correcao { display: flex; flex-direction: column; gap: 8px; }
.fe-linha-nota {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px;
  border-radius: 20px; background: var(--branco); border-left: 10px solid var(--cor); box-shadow: var(--sombra);
}
.fe-linha-nota .chip { min-width: 0; font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fe-notas { display: flex; gap: 6px; flex: none; }
.fe-nota {
  width: clamp(46px, 14vw, 64px); height: 54px; border-radius: 16px; background: #f1f5f9; color: #334155;
  font-size: 24px; font-weight: 900; border: 3px solid transparent;
}
.fe-nota:active { transform: scale(.94); }
.fe-nota-10.fe-ligado { background: #22c55e; color: #fff; border-color: #15803d; }
.fe-nota-5.fe-ligado { background: #facc15; color: #713f12; border-color: #a16207; }
.fe-nota-0.fe-ligado { background: #94a3b8; color: #fff; border-color: #475569; }
.fe-tabela { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.fe-tabela-linha {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0 10px; padding: 8px 12px;
  text-align: left; border-radius: 16px; background: #f8fafc; border-left: 8px solid var(--cor);
}
.fe-tabela-linha > span:first-child { grid-row: 1 / span 2; font-size: 26px; }
.fe-tabela-linha .chip { justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fe-tabela-linha b { grid-row: 1 / span 2; grid-column: 3; font-size: 24px; }
.fe-tabela-linha small { grid-column: 2; grid-row: 2; font-size: 14px; opacity: .7; }

/* ---------- Batata Quente ---------- */
.fe-roda .fe-ordem { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; }
.fe-seta { font-weight: 900; opacity: .5; }
.fe-painel .fe-quem-comeca { font-size: 20px; font-weight: 800; }
.fe-batata { width: min(50vw, 210px); margin: 0 auto; padding-top: 18px; }
.fe-batata svg { display: block; width: 100%; overflow: visible; }
.fe-batata-fria { width: 120px; padding-top: 0; }
.fe-batata-quente svg { animation: fe-treme-batata var(--rapidez, 600ms) ease-in-out infinite; transform-origin: 50% 70%; }
.fe-fumaca path { animation: fe-fumaca 1.2s ease-in-out infinite; }
.fe-fumaca path:nth-child(2) { animation-delay: -.4s; }
.fe-fumaca path:nth-child(3) { animation-delay: -.8s; }
.fe-estourou svg { animation: fe-estoura .5s ease-out forwards; }
.fe-pedido {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 16px; text-align: center;
  border-radius: 28px; background: var(--branco); border: 5px solid var(--cor, #ede9fe); box-shadow: var(--sombra);
}
.fe-pedido-emoji { font-size: 60px; line-height: 1.1; }
.fe-pedido strong { font-size: clamp(22px, 6.4vw, 30px); line-height: 1.2; overflow-wrap: anywhere; }
.fe-passar {
  padding: 20px; border-radius: 26px; background: #22c55e; color: #fff; font-size: 26px; font-weight: 900;
  box-shadow: 0 7px 0 #15803d; text-shadow: 0 2px 0 rgba(0, 0, 0, .2);
}
.fe-passar:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 2px 0 #15803d; }
.fe-pof {
  position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none; background: radial-gradient(circle, rgba(253, 224, 71, .9), rgba(244, 114, 182, .65) 45%, rgba(109, 76, 224, 0) 75%);
  animation: aparece .15s ease-out;
}
.fe-pof span {
  font-size: clamp(90px, 30vw, 180px); font-weight: 900; line-height: 1; color: #fff;
  text-shadow: 0 6px 0 #db2777, 0 0 30px #fde047; animation: fe-pof .6s cubic-bezier(.2, 1.8, .4, 1);
}
.fe-pof small { font-size: 70px; animation: fe-pof .6s .1s cubic-bezier(.2, 1.8, .4, 1) backwards; }
.fe-menos { display: inline-block; margin-left: 8px; color: #ef4444; font-size: 20px; }
.fe-prenda { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 20px; background: #fef3c7; border: 3px dashed #f59e0b; }
.fe-prenda small { font-size: 15px; font-weight: 800; opacity: .75; }

/* ---------- animações ---------- */
@keyframes fe-flutua { 50% { transform: translateY(-6px); } }
@keyframes fe-pulsa { 50% { transform: scale(1.15); } }
@keyframes fe-pula-peao { 50% { transform: translateY(-5px) scale(1.12); } }
@keyframes fe-chama { 50% { transform: scale(1.06) rotate(-4deg); box-shadow: 0 6px 0 rgba(42, 26, 94, .3), 0 0 0 8px rgba(253, 224, 71, .6); } }
@keyframes fe-rola { 0% { transform: rotate(0) translateY(0); } 25% { transform: rotate(90deg) translateY(-12px); } 50% { transform: rotate(180deg) translateY(0); } 75% { transform: rotate(270deg) translateY(-12px); } 100% { transform: rotate(360deg) translateY(0); } }
@keyframes fe-surge { from { transform: scale(.5); } }
@keyframes fe-vira { from { transform: rotateY(90deg); opacity: .3; } }
@keyframes fe-treme { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg) scale(1.04); } }
@keyframes fe-balanca { 50% { transform: rotate(-12deg) translateY(-4px); } }
@keyframes fe-treme-batata { 0%, 100% { transform: rotate(-6deg) scale(1); } 50% { transform: rotate(6deg) scale(1.06); } }
@keyframes fe-fumaca { 0% { transform: translateY(6px); opacity: 0; } 50% { opacity: .9; } 100% { transform: translateY(-10px); opacity: 0; } }
@keyframes fe-estoura { to { transform: scale(1.7); opacity: 0; } }
@keyframes fe-pof { from { transform: scale(.2) rotate(-12deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fe-flutua, .fe-passe-emoji, .fe-dado-pronto, .fe-peao-vez .fe-peao-dentro { animation: none; } }

/* ==================== formatos, Quiz Show, cartas que ensinam ==================== */
.fe-escolha-caixa { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.fe-escolha-caixa h3 { margin: 0; font-size: 18px; }
.fe-escolha-chip small { display: block; font-size: 12px; font-weight: 700; opacity: .8; }
.fe-cat-dica { margin: 6px 0 0; padding: 6px 12px; border-radius: 14px; background: #f0fdf4; color: #166534; font-size: 16px; font-weight: 700; text-align: center; }
.fe-carta-traducao { font-size: 18px; font-weight: 800; color: #6d28d9; }
.fe-sabia { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 10px 12px; border-radius: 16px; background: #fef9c3; text-align: left; }
.fe-sabia b { font-size: 16px; }
.fe-sabia p { margin: 0; font-size: 15px; line-height: 1.35; }

/* O destaque do Quiz Show no menu e o botão da competição. */
.fe-destaque {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 26px; text-align: left;
  background: linear-gradient(120deg, #312e81, #db2777); color: #fff; box-shadow: var(--sombra); border: 4px solid #fde047;
}
.fe-destaque-arte { flex: none; width: 92px; }
.fe-destaque-arte svg { display: block; width: 100%; }
.fe-destaque-texto { display: flex; flex-direction: column; gap: 2px; }
.fe-destaque-texto small { font-size: 14px; font-weight: 800; }
.fe-destaque-texto strong { font-size: 24px; line-height: 1.1; text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.fe-destaque-texto span { font-size: 15px; font-weight: 700; }
.fe-competicao { align-self: center; background: #fef3c7; color: #92400e; }

/* ---------- Quiz Show ---------- */
.fe-qs-painel { gap: 14px; }
.fe-qs-tabela { width: 100%; padding: 10px; border-radius: 18px; background: #312e81; color: #fff; }
.fe-qs-tabela h3 { margin: 0 0 6px; text-align: center; font-size: 18px; color: #fde047; }
.fe-qs-tabela ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.fe-qs-tabela li { display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 12px; background: rgba(255, 255, 255, .1); border-left: 8px solid var(--cor); }
.fe-qs-tabela li b { flex: 1; font-size: 17px; }
.fe-qs-tabela li small { font-size: 14px; opacity: .9; }
.fe-qs-tabela p { margin: 4px 0 0; text-align: center; font-size: 15px; }
.fe-qs-campeoes { color: #fde047; font-weight: 800; }
.fe-qs-abre {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 22px 16px; border-radius: 30px; text-align: center;
  background: radial-gradient(circle at 50% 0, #6d28d9, #312e81); color: #fff; box-shadow: var(--sombra); border: 5px solid #fde047;
}
.fe-qs-abre-emoji { font-size: 70px; line-height: 1; animation: fe-qs-pula 1s ease-in-out infinite alternate; }
@keyframes fe-qs-pula { to { transform: translateY(-6px) scale(1.06); } }
.fe-qs-abre small { font-size: 16px; font-weight: 800; color: #fde047; }
.fe-qs-abre h2 { margin: 0; font-size: 38px; }
.fe-qs-abre p { margin: 0; font-size: 18px; font-weight: 700; }
.fe-qs-pergunta { border-top: 8px solid var(--cor); }
.fe-qs-pergunta p { font-size: clamp(20px, 5.4vw, 30px); }
.fe-qs-materia { align-self: center; padding: 3px 14px; border-radius: 999px; background: var(--cor); color: #fff; font-size: 15px; font-weight: 900; }
.fe-qs-opcoes .opcao:disabled:not(.opcao-certa):not(.opcao-errada) { opacity: .55; }
/* Os botões de cada jogador: grandes e na cor dele, para tocar ao mesmo tempo. */
/* Os botões ficam presos embaixo da tela (sempre à mão, mesmo com a pergunta grande). */
.fe-qs-botoes {
  position: sticky; bottom: 6px; z-index: 5; display: grid; grid-template-columns: repeat(min(var(--n), 4), minmax(0, 1fr)); gap: 8px;
  padding: 8px; border-radius: 28px; background: rgba(42, 26, 94, .55); backdrop-filter: blur(4px); touch-action: none;
}
.fe-qs-pergunta .pergunta-emoji { font-size: clamp(40px, 9vh, 72px); }
.fe-qs-buzina {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 74px; padding: 8px 4px;
  border-radius: 24px; background: var(--cor); color: #fff; border: 4px solid #fff; box-shadow: 0 7px 0 var(--escura);
  font-size: 17px; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); touch-action: none;
}
.fe-qs-buzina b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fe-qs-buzina:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 2px 0 var(--escura); }
.fe-qs-buzina:disabled { opacity: .3; }
.fe-qs-buzina-tecla { position: absolute; top: 4px; left: 8px; font-size: 13px; opacity: .8; }
.fe-qs-buzina.fe-qs-vez { opacity: 1; transform: scale(1.06); box-shadow: 0 0 0 6px #fde047, 0 7px 0 var(--escura); animation: fe-qs-pula .4s ease-in-out infinite alternate; }
.fe-qs-buzina.fe-qs-espera { filter: grayscale(.85) brightness(.8); }
.fe-qs-buzina.fe-qs-espera::after { content: "⏳"; position: absolute; top: 4px; right: 8px; font-size: 16px; }
.fe-qs-campeao { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 22px; background: linear-gradient(120deg, #fde047, #f59e0b); color: #713f12; box-shadow: var(--sombra); }
.fe-qs-campeao > span { font-size: 54px; }
.fe-qs-campeao small { display: block; font-weight: 800; }
.fe-qs-campeao strong { font-size: 20px; }
.fim .fe-qs-tabela { max-width: 520px; margin: 0 auto; }

.modo-tv .fe-qs-buzina { min-height: 100px; font-size: 20px; }
@media (prefers-reduced-motion: reduce) { .fe-qs-abre-emoji, .fe-qs-buzina.fe-qs-vez { animation: none; } }