*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--am:#F5C800; --ame:#F4B63D; --pr:#111111;--br:#FFFFFF; --az:#4A90E2; --vd:#3AB54A;--vdd:#2A9038;--vm:#E03A3A;--cl:#F0F0F0;--ci:#AAAAAA;--cm:#666666;--sh:rgba(0,0,0,0.18);--r:12px;--rl:20px;--rs:8px;--fd:'Syne',sans-serif;--fb:'DM Sans',sans-serif}
.app{position:relative;width:100%;height:100dvh;max-height:100dvh;overflow:hidden}

html,body{height:100%;max-height:100%;overflow:hidden;font-family:var(--fb);font-size:15px;background:var(--am);color:var(--pr);-webkit-font-smoothing:antialiased;-webkit-overflow-scrolling:touch}
.oculto{display:none!important}
.tela{display:none;flex-direction:column;width:100%;height:100dvh;max-height:100dvh;overflow:hidden}
.tela.ativa{display:flex}
.tela-inicio,.tela-menu,.tela-lobby,.tela-fim{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

/* TOPBAR */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;background:var(--ame);gap:12px;flex-shrink:0}
.topbar-logo{display:flex;align-items:center}
.topbar-logo-img{height:32px;width:auto;object-fit:contain}
.topbar-logo-txt{font-family:var(--fd);font-size:22px;font-weight:800;color:var(--am);letter-spacing:-1px}
.topbar-user{display:flex;align-items:center;gap:10px;flex:1;justify-content:center}
.topbar-av{width:36px;height:36px;border-radius:50%;overflow:hidden;border:2px solid var(--am);flex-shrink:0;background:var(--cm);display:flex;align-items:center;justify-content:center}
.topbar-av img{width:100%;height:100%;object-fit:cover}
.topbar-info{display:flex;flex-direction:column;gap:1px}
.topbar-nome{font-size:13px;font-weight:600;color:var(--pr)}
.topbar-pts{font-size:11px;color:var(--pr);font-weight:500}
.topbar-direita{display:flex;align-items:center;gap:10px}
.btn-como-jogar{display:flex;align-items:center;gap:5px;background:var(--vd);color:var(--br);border:none;border-radius:20px;padding:6px 14px;font-size:12px;font-weight:600;font-family:var(--fb);cursor:pointer;white-space:nowrap}
.btn-icone-topbar{background:none;border:none;color:var(--br);cursor:pointer;display:flex;align-items:center;padding:4px;opacity:.8}
.btn-icone-topbar:hover{opacity:1}

/* INÍCIO */
.tela-inicio{background:var(--am);align-items:center}
.inicio-topo{width:100%;display:flex;justify-content:flex-end;padding:14px 20px}
.inicio-centro{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:0 20px 40px;width:100%;max-width:480px}
.logo-wrap{text-align:center}
.logo-img{max-width:280px;width:100%;height:auto;object-fit:contain}
.logo-fallback{font-family:var(--fd);font-size:72px;font-weight:800;color:var(--am);letter-spacing:-3px;line-height:1}
.avatar-sel-wrap{width:100%;text-align:center}
.avatar-sel-label{font-size:13px;color:var(--pr);margin-bottom:12px;font-weight:500}
.avatar-sel-lista{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.av-opcao{width:64px;height:64px;border-radius:50%;border:3px solid transparent;background:var(--cm);cursor:pointer;padding:0;overflow:hidden;position:relative;transition:all .15s}
.av-opcao img{width:100%;height:100%;object-fit:cover;display:block}
.av-opcao .av-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:var(--br);background:var(--cm)}
.av-opcao img + .av-num{display:none}
.av-opcao.selecionado{border-color:var(--am);box-shadow:0 0 0 2px var(--am)}
.av-opcao:hover{border-color:rgba(245,200,0,.6)}
.inicio-form{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
.inicio-form-label{font-size:13px;color:var(--pr);font-weight:500;align-self:flex-start}
.input-nome{width:100%;padding:14px 20px;border-radius:var(--r);border:2px solid transparent;background:var(--br);font-size:16px;font-family:var(--fb);color:var(--pr);outline:none;text-align:center;transition:border-color .15s}
.input-nome:focus{border-color:var(--am)}
.input-nome::placeholder{color:var(--ci)}
/* btn-entrar movido */
.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--br);color:var(--pr);border:none;border-radius:var(--r);padding:12px 20px;font-size:14px;font-weight:600;font-family:var(--fb);cursor:pointer;width:100%;transition:background .15s}
.btn-google:hover{background:var(--cl)}

/* MENU */
.tela-menu{background:var(--am)}
.menu-body{flex:1;padding:32px 20px;max-width:560px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:20px}
.menu-titulo{font-family:var(--fd);font-size:26px;font-weight:700;color:var(--pr)}
.menu-acoes{display:flex;flex-direction:column;gap:12px}
.menu-card{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:var(--rl);border:none;cursor:pointer;text-align:left;font-family:var(--fb);transition:transform .12s,box-shadow .12s;box-shadow:0 4px 16px var(--sh)}
.menu-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px var(--sh)}
.menu-card-criar{background:var(--vd);color:var(--br)}
.menu-card-entrar{background:var(--az);color:var(--br)}
.menu-card-ico{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.menu-card-txt{flex:1;display:flex;flex-direction:column;gap:3px}
.menu-card-txt strong{font-size:16px;font-weight:700}
.menu-card-txt span{font-size:12px;opacity:.8}

/* PAINEL */
.painel{background:var(--br);border-radius:var(--rl);box-shadow:0 8px 32px var(--sh);overflow:hidden;animation:slideDown .2s ease}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.painel-cabecalho{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:var(--pr);color:var(--br);font-size:15px;font-weight:700}
.painel-x{background:none;border:none;color:var(--br);cursor:pointer;display:flex;align-items:center;opacity:.7}
.painel-x:hover{opacity:1}
.painel-inner{padding:20px;display:flex;flex-direction:column;gap:16px}
.fg{display:flex;flex-direction:column;gap:7px}
.fl{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--cm)}
.tab-row,.num-row{display:flex;gap:6px;flex-wrap:wrap}
.tab,.nchip,.tchip{padding:7px 14px;border-radius:20px;border:1.5px solid var(--cl);background:var(--cl);font-size:13px;font-weight:600;color:var(--cm);cursor:pointer;font-family:var(--fb);transition:all .12s;display:flex;align-items:center;gap:5px}
.tab:hover,.nchip:hover,.tchip:hover{border-color:var(--pr);color:var(--pr)}
.tab.ativo,.nchip.ativo{background:var(--pr);border-color:var(--pr);color:var(--br)}
.tchip.ativo{background:var(--vd);border-color:var(--vd);color:var(--br)}
.nchip{width:38px;height:38px;padding:0;justify-content:center;border-radius:50%}
.temas-flex{display:flex;flex-wrap:wrap;gap:6px}
.sub-fg{padding:12px;background:var(--cl);border-radius:var(--rs);display:flex;flex-direction:column;gap:8px}
.dono-box{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--cl);border-radius:var(--rs);font-size:14px;font-weight:600}
.finput{width:100%;padding:12px 16px;border:1.5px solid var(--cl);border-radius:var(--rs);font-size:15px;font-family:var(--fb);color:var(--pr);outline:none;transition:border-color .15s}
.finput:focus{border-color:var(--pr)}
.finput-code{font-family:var(--fd);font-size:28px;font-weight:700;letter-spacing:4px;text-align:center;text-transform:uppercase}
.fsel{width:100%;padding:11px 16px;border:1.5px solid var(--cl);border-radius:var(--rs);font-size:14px;font-family:var(--fb);color:var(--pr);background:var(--br);outline:none;appearance:none;cursor:pointer}
/* btn-verde movido */

/* LOBBY */
.tela-lobby{background:var(--am)}
.lobby-body{flex:1;padding:24px 20px;max-width:800px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:16px}
.lobby-titulo{font-family:var(--fd);font-size:28px;font-weight:800;color:var(--pr);text-align:center}
.lobby-codigo-row{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.lobby-cod-label{font-size:14px;font-weight:600;color:var(--cm)}
.lobby-cod-val{font-family:var(--fd);font-size:22px;font-weight:800;color:var(--pr);letter-spacing:3px}
.btn-icone-sm{background:var(--pr);border:none;color:var(--br);width:30px;height:30px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:opacity .15s}
.btn-icone-sm:hover{opacity:.8}
.lobby-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:540px){.lobby-grid{grid-template-columns:1fr}}
.lobby-panel{background:var(--br);border-radius:var(--rl);padding:16px;display:flex;flex-direction:column;gap:10px;box-shadow:0 2px 12px var(--sh)}
.lobby-panel-tit{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--cm);border-bottom:1px solid var(--cl);padding-bottom:10px}
.lobby-cont-badge{font-size:11px;background:var(--am);color:var(--pr);padding:2px 8px;border-radius:20px;font-weight:700}
.lobby-config-ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.lobby-config-ul li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--pr)}
.lobby-config-ul li svg{color:var(--cm);flex-shrink:0}
.btn-alterar{display:flex;align-items:center;gap:6px;background:none;border:none;color:var(--vd);font-size:12px;font-weight:600;cursor:pointer;font-family:var(--fb);padding:0;margin-top:4px}
.btn-alterar:hover{text-decoration:underline}
.lobby-jog-ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.lobby-jog-ul li{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--cl);border-radius:var(--rs);font-size:14px;font-weight:500}
.lobby-jog-av{width:32px;height:32px;border-radius:50%;overflow:hidden;background:var(--cm);flex-shrink:0}
.lobby-jog-av img{width:100%;height:100%;object-fit:cover}
.tag-dono,.tag-voce{font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px;margin-left:auto}
.tag-dono{background:var(--am);color:var(--pr)}
.tag-voce{background:var(--vd);color:var(--br)}
.lobby-aguardando{font-size:12px;color:var(--ci);font-style:italic;margin-top:4px}
.btn-iniciar{padding:16px;background:var(--vd);color:var(--br);border:none;border-radius:var(--r);font-size:16px;font-weight:800;font-family:var(--fd);cursor:pointer;width:100%;letter-spacing:1px;transition:background .15s,transform .1s;box-shadow:0 4px 16px rgba(58,181,74,.35)}
.btn-iniciar:hover{background:var(--vdd);transform:translateY(-1px)}
.btn-sair{background:none;border:1.5px solid rgba(0,0,0,.2);color:var(--cm);border-radius:var(--r);padding:12px;font-size:14px;font-weight:600;font-family:var(--fb);cursor:pointer;width:100%}
.btn-sair:hover{background:rgba(0,0,0,.05)}

/* O círculo amarelo que está no HTML */
.perfil-av-grande {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #e0e0e0; /* Cor cinza de fundo se a imagem sumir */
  border: 4px solid var(--am);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* A div 'd' que sua função criarAv gera */
.perfil-av-img {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* A imagem real lá dentro */
.perfil-av-img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Faz a imagem cobrir o círculo sem esticar */
}

/* JOGO */
.tela-jogo{background:var(--am);overflow:hidden;height:100dvh;max-height:100dvh;flex-direction:column;position:relative}
.jogo-layout{display:flex;flex:1;overflow:hidden}
.jogo-esq{width:120px;flex-shrink:0;background:var(--br);border-right:1px solid rgba(0,0,0,.08);padding:12px 8px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.jogo-cod-badge{background:var(--pr);color:var(--am);font-size:10px;font-weight:700;letter-spacing:1px;padding:4px 8px;border-radius:6px;text-align:center}
.dicas-num-lista{display:flex;flex-direction:column;gap:3px}
.dica-num-item{font-size:11px;color:var(--cm);padding:3px 6px;border-radius:5px;line-height:1.4;word-break:break-word}
.dica-num-item.revelada{background:var(--am);color:var(--pr);font-weight:600}
.jogo-centro{flex:1;display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.est{width:100%;max-width:420px;display:flex;flex-direction:column;align-items:center;gap:16px}
.dado-wrap{display:flex;flex-direction:column;align-items:center;gap:16px}
/* dado movido para animações novas */
/* dadoFloat movido */
.vez-texto{font-family:var(--fd);font-size:20px;font-weight:700;color:var(--pr);text-align:center;background:var(--br);padding:14px 28px;border-radius:var(--rl);box-shadow:0 4px 16px var(--sh)}
.escolha-dica-tit{font-family:var(--fd);font-size:22px;font-weight:800;color:var(--pr);text-align:center}
.hex-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:380px}
/* hex-btn movido para animações novas */
.carta-wrap{width:100%;display:flex;flex-direction:column;gap:10px}
.carta-tema-box{background:var(--br);border-radius:var(--r);padding:14px 20px;font-family:var(--fd);font-size:20px;font-weight:800;color:var(--pr);text-align:center;box-shadow:0 2px 10px var(--sh)}
.carta-dica-box{background:var(--br);border-radius:var(--r);padding:14px 20px;font-size:15px;font-weight:500;display:flex;gap:8px;align-items:flex-start;box-shadow:0 2px 10px var(--sh);line-height:1.6}
.carta-dica-label{font-weight:700;color:var(--cm);flex-shrink:0}
.caixa-resposta{width:100%;padding:14px 20px;border-radius:var(--r);border:3px solid var(--pr);font-size:16px;font-family:var(--fd);font-weight:700;text-transform:uppercase;text-align:center;outline:none;background:var(--br);transition:border-color .15s}
.caixa-resposta:focus{border-color:var(--vd)}
.caixa-resposta::placeholder{font-weight:400;font-family:var(--fb);text-transform:none;color:var(--ci)}
/* btn-responder movido */
.msg-jogo{font-size:14px;font-weight:600;padding:10px 16px;border-radius:var(--rs);text-align:center;width:100%}
.msg-jogo.acerto{background:#d1fae5;color:#065f46}
.msg-jogo.erro{background:#fee2e2;color:#991b1b}
.msg-jogo.aviso{background:#fef9c3;color:#713f12}
/* fb-box movido */
@keyframes popIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
/* fb-titulo movido */
.fb-verde{color:var(--vd)}
.fb-vermelho{color:var(--vm)}
.fb-sub{font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--cm);margin-bottom:6px}
.fb-resposta-txt{font-family:var(--fd);font-size:22px;font-weight:700;color:var(--pr);margin-bottom:8px}
.fb-pontos{font-size:18px;font-weight:700;color:var(--vd)}
.outro-nome-txt{font-family:var(--fd);font-size:24px;font-weight:800;color:var(--vd);margin-bottom:8px}
.outro-palpite-txt{font-family:var(--fd);font-size:28px;font-weight:800;color:var(--pr)}
.outro-sub{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--cm);margin-bottom:6px}
.jogo-dir{width:110px;flex-shrink:0;background:var(--br);border-left:1px solid rgba(0,0,0,.08);padding:12px 8px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.placar-lista{display:flex;flex-direction:column;gap:8px}
.placar-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px;border-radius:var(--rs);border:2px solid transparent;transition:all .15s}
.placar-item.vez-ativa{border-color:var(--am);background:#FFFDE7}
.placar-item-clicavel{cursor:pointer}
.placar-item-clicavel:hover{background:rgba(0,0,0,.05)}
.placar-av{width:44px;height:44px;border-radius:50%;overflow:hidden;background:var(--cm)}
.placar-av img{width:100%;height:100%;object-fit:cover}
.placar-nome{font-size:11px;font-weight:600;text-align:center;color:var(--pr);max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.placar-pts{font-size:12px;font-weight:700;color:var(--cm)}
.placar-item.vez-ativa .placar-pts{color:var(--pr)}
.palpites-bar{background:var(--pr);color:var(--br);padding:8px 16px;display:flex;align-items:center;gap:10px;flex-shrink:0;overflow-x:auto;scrollbar-width:none;min-height:44px}
.palpites-bar::-webkit-scrollbar{display:none}
.palpites-bar-label{font-size:11px;font-weight:600;color:var(--ci);white-space:nowrap;letter-spacing:.5px;text-transform:uppercase}
.palpites-bar-lista{display:flex;gap:8px;align-items:center}
.palpite-chip{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.1);padding:4px 10px;border-radius:20px;white-space:nowrap;font-size:13px}
.palpite-chip .pch-nome{font-weight:600;color:var(--am)}
.palpite-chip .pch-txt{color:var(--br)}
.palpite-chip.errado{background:rgba(224,58,58,.2)}
.palpite-chip.errado .pch-txt{color:#fca5a5}

/* NOTIF */
.notif-overlay{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);animation:fadeIn .2s ease}
.notif-box{background:var(--pr);color:var(--br);border-radius:var(--rl);padding:32px 48px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.4);animation:popIn .3s ease}
.notif-label{font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--ci);margin-bottom:10px}
.notif-resposta-txt{font-family:var(--fd);font-size:36px;font-weight:800;color:var(--am)}

/* FIM */
.tela-fim{background:var(--am)}
.fim-body{flex:1;display:flex;flex-direction:column;align-items:center;padding:32px 20px;gap:28px}
.fim-titulo{font-family:var(--fd);font-size:40px;font-weight:800;color:var(--pr);letter-spacing:-1px}
.podio-fim{display:flex;align-items:flex-end;justify-content:center;gap:12px;width:100%;max-width:480px}
.podio-item{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;max-width:130px;animation:popIn .4s ease both}
.podio-item:nth-child(1){animation-delay:.2s}
.podio-item:nth-child(2){animation-delay:0s}
.podio-item:nth-child(3){animation-delay:.4s}
.podio-av-wrap{position:relative;display:flex;justify-content:center}
.podio-coroa{position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-size:20px}
.podio-av{width:64px;height:64px;border-radius:50%;overflow:hidden;background:var(--cm);border:4px solid var(--pr)}
.podio-av img{width:100%;height:100%;object-fit:cover}
.podio-nome{font-size:13px;font-weight:700;color:var(--pr);text-align:center;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.podio-pts{font-size:12px;color:var(--cm);font-weight:600}
.podio-plataforma{width:100%;border-radius:10px 10px 0 0;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:22px;font-weight:800;color:var(--br)}
.podio-1o .podio-plataforma{height:90px;background:var(--pr)}
.podio-2o .podio-plataforma{height:64px;background:#555}
.podio-3o .podio-plataforma{height:48px;background:#888}
.fim-acoes{display:flex;gap:12px;width:100%;max-width:400px;flex-wrap:wrap}
.btn-fim-pri{flex:1;padding:14px;background:var(--vd);color:var(--br);border:none;border-radius:var(--r);font-size:15px;font-weight:700;font-family:var(--fb);cursor:pointer}
.btn-fim-pri:hover{background:var(--vdd)}
.btn-fim-sec{flex:1;padding:14px;background:var(--pr);color:var(--br);border:none;border-radius:var(--r);font-size:15px;font-weight:700;font-family:var(--fb);cursor:pointer;opacity:.8}
.btn-fim-sec:hover{opacity:1}
.confetes-canvas{position:fixed;inset:0;z-index:50;pointer-events:none}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:4px}


/* ========= MOBILE RESPONSIVO ========= */
@media(max-width:480px){
  /* Topbar compacta */
  .topbar{padding:8px 14px;gap:8px}
  .topbar-logo-img{height:26px}
  .btn-como-jogar{padding:5px 10px;font-size:11px}
  .topbar-av{width:30px;height:30px}
  .topbar-nome{font-size:12px}
  .topbar-pts{font-size:10px}

  /* Inicio */
  .inicio-centro{padding:0 16px 28px;gap:20px}
  .logo-img{max-width:220px}
  .logo-fallback{font-size:54px}
  .av-opcao{width:52px;height:52px}
  .input-nome{padding:12px 16px;font-size:15px}
  .btn-entrar{padding:13px;font-size:15px}

  /* Menu */
  .menu-body{padding:20px 14px;gap:16px}
  .menu-titulo{font-size:20px}
  .menu-card{padding:14px 16px;gap:12px}
  .menu-card-ico{width:38px;height:38px}
  .menu-card-txt strong{font-size:14px}
  .menu-card-txt span{font-size:11px}
  .painel-inner{padding:16px;gap:12px}
  .tab,.nchip,.tchip{font-size:12px;padding:6px 12px}
  .finput-code{font-size:22px;letter-spacing:3px}

  /* Lobby */
  .lobby-body{padding:16px 12px;gap:12px}
  .lobby-titulo{font-size:22px}
  .lobby-cod-val{font-size:18px;letter-spacing:2px}
  .lobby-panel{padding:12px}
  .lobby-jog-ul li{padding:6px 8px;font-size:13px}
  .btn-iniciar{padding:14px;font-size:15px}

  /* Jogo - layout adaptado para mobile */
  .jogo-layout{flex-direction:column}
  .jogo-esq{
    width:100%;
    height:auto;
    flex-shrink:0;
    border-right:none;
    border-bottom:1px solid rgba(0,0,0,.08);
    padding:8px 10px;
    overflow-x:auto;
    overflow-y:hidden;
    display:flex;
    flex-direction:row;
    gap:5px;
    max-height:52px
  }
  .jogo-cod-badge{display:none}
  .dicas-num-lista{flex-direction:row;flex-wrap:nowrap;gap:4px;align-items:center}
  .dica-num-item{white-space:nowrap;font-size:10px;padding:3px 7px;flex-shrink:0}
  .jogo-dir{
    width:100%;
    height:auto;
    flex-shrink:0;
    border-left:none;
    border-top:1px solid rgba(0,0,0,.08);
    padding:8px 10px;
    overflow-x:auto;
    overflow-y:hidden;
    order:3
  }
  .placar-lista{flex-direction:row;gap:8px}
  .placar-item{flex-direction:row;padding:5px 10px;gap:8px;min-width:auto}
  .placar-av{width:28px;height:28px}
  .placar-nome{font-size:12px;max-width:70px}
  .placar-pts{font-size:12px}
  .jogo-centro{
    order:2;
    padding:12px;
    flex:1;
    min-height:0
  }
  .est{max-width:100%}
  .dado-svg{width:70px;height:70px}
  .vez-texto{font-size:16px;padding:10px 20px}
  .hex-btn{width:46px;height:52px;font-size:12px}
  .carta-tema-box{font-size:17px;padding:10px 16px}
  .carta-dica-box{font-size:14px;padding:10px 14px}
  .caixa-resposta{font-size:15px;padding:12px 16px}
  .fb-titulo{font-size:28px}
  .fb-resposta-txt{font-size:18px}
  .fb-box{padding:20px}

  /* Barra de palpites mobile */
  .palpites-bar{padding:6px 12px;min-height:38px}
  .palpite-chip{font-size:12px;padding:3px 8px}

  /* Fim */
  .fim-body{padding:20px 16px;gap:20px}
  .fim-titulo{font-size:28px}
  .podio-av{width:52px;height:52px}
  .podio-1o .podio-plataforma{height:72px}
  .podio-2o .podio-plataforma{height:52px}
  .podio-3o .podio-plataforma{height:38px}
  .btn-fim-pri,.btn-fim-sec{padding:12px;font-size:14px}

  /* Notif */
  .notif-box{padding:24px 28px;margin:0 20px}
  .notif-resposta-txt{font-size:28px}
}

/* Altura baixa (landscape mobile) */
@media(max-height:500px) and (orientation:landscape){
  .inicio-centro{gap:12px;padding:8px 20px 16px}
  .logo-img{max-width:140px}
  .avatar-sel-wrap{display:none}
  .dado-svg{width:60px;height:60px}
  .jogo-esq,.jogo-dir{max-height:40px;padding:4px 8px}
}

/* ===== FOOTER PROMO ===== */
.app-footer{margin-top:auto;padding:8px 0 0}
.promo-banner{display:flex;align-items:center;gap:14px;padding:14px 20px;background:#1a1a1a;color:var(--br);text-decoration:none;transition:background .15s}
.promo-banner:hover{background:#111}
.promo-ico{font-size:24px;flex-shrink:0;line-height:1;opacity:.85}
.promo-txt{display:flex;flex-direction:column;gap:2px;flex:1}
.promo-titulo{font-family:var(--fd);font-size:15px;font-weight:800;color:#fff}
.promo-sub{font-size:11px;color:rgba(255,255,255,.45)}
.promo-seta{flex-shrink:0;opacity:.35}

/* ===== LOBBY EDIT FORM ===== */
.lobby-edit-form{display:flex;flex-direction:column;gap:12px}
.lobby-edit-form .fg{display:flex;flex-direction:column;gap:6px}

/* ===== MODAIS ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:300;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-box{background:#fff;border-radius:var(--rl);width:100%;max-width:440px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal-box-sm{max-width:320px}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 0}
.modal-titulo{font-family:var(--fd);font-size:20px;font-weight:800;color:var(--pr)}
.modal-x{background:none;border:none;cursor:pointer;color:var(--cm);display:flex;align-items:center;justify-content:center;padding:4px;border-radius:6px}
.modal-x:hover{background:var(--cl)}
.modal-body{padding:20px 24px 24px}
.cj-passo{display:flex;gap:14px;margin-bottom:16px;align-items:flex-start}
.cj-num{width:28px;height:28px;border-radius:50%;background:var(--am);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex-shrink:0;margin-top:2px}
.cj-passo p{margin:4px 0 0;font-size:13px;color:var(--cm);line-height:1.4}
.cj-passo strong{font-size:14px;color:var(--pr)}
.cj-detalhe{background:var(--cl);border-radius:var(--rs);padding:12px 14px;font-size:13px;color:var(--cm);margin-top:8px}
.btn-sair-topbar{display:inline-flex;align-items:center;gap:5px;background:none;border:1.5px solid rgba(0, 0, 0, 0.751);color:#000000;border-radius:20px;padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer;transition:background .15s}
.btn-sair-topbar:hover{background:rgba(255,255,255,.1)}
.btn-vermelho{background:var(--vm);color:#fff;border:none;border-radius:var(--r);padding:12px;font-size:14px;font-weight:700;cursor:pointer;transition:opacity .15s}
.btn-vermelho:hover{opacity:.85}
.btn-vermelho:disabled{opacity:.45;cursor:default}

/* ===== PERFIL ===== */
.modal-perfil{max-width:400px}
.perfil-topo{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.perfil-av-grande{width:72px;height:72px;border-radius:50%;overflow:hidden;border:3px solid var(--am);flex-shrink:0;background:var(--cl);display:flex;align-items:center;justify-content:center}
.perfil-av-img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.perfil-info-nome{display:flex;flex-direction:column;gap:6px}
.perfil-nome-txt{font-family:var(--fd);font-size:22px;font-weight:800;color:var(--pr)}
.perfil-google-badge{display:flex;align-items:center;gap:5px;background:#f1f3f4;border-radius:20px;padding:3px 10px;font-size:11px;font-weight:600;color:#555;width:fit-content}
.perfil-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}
.perfil-stat{background:var(--cl);border-radius:var(--r);padding:12px;text-align:center}
.perfil-stat-num{font-family:var(--fd);font-size:28px;font-weight:800;color:var(--pr)}
.perfil-stat-label{font-size:11px;color:var(--cm);font-weight:600;text-transform:uppercase;letter-spacing:.4px;margin-top:2px}
.perfil-av-label{font-size:12px;font-weight:700;color:var(--cm);text-transform:uppercase;letter-spacing:.4px;margin-bottom:10px}
.perfil-av-lista{justify-content:center}

/* ===== ANIMAÇÕES NOVAS ===== */
@keyframes dadoSpin{
  0%{transform:rotateY(0) rotateX(0) scale(1)}
  25%{transform:rotateY(180deg) rotateX(90deg) scale(1.15)}
  50%{transform:rotateY(360deg) rotateX(180deg) scale(1)}
  75%{transform:rotateY(540deg) rotateX(270deg) scale(1.1)}
  100%{transform:rotateY(720deg) rotateX(360deg) scale(1)}
}
@keyframes dadoFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(3deg)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
@keyframes bounceIn{0%{transform:scale(0.3);opacity:0}50%{transform:scale(1.1);opacity:1}70%{transform:scale(0.95)}100%{transform:scale(1)}}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes hexReveal{from{transform:scale(0) rotate(-30deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
@keyframes ptsPop{0%{transform:scale(1)}30%{transform:scale(1.4)}60%{transform:scale(0.9)}100%{transform:scale(1)}}
@keyframes bgFlashGreen{0%,100%{background:var(--am)}30%{background:#b8f0c0}70%{background:#d4f7da}}
@keyframes bgFlashRed{0%,100%{background:var(--am)}30%{background:#ffd0d0}70%{background:#ffe0e0}}
@keyframes confettiDrop{0%{transform:translateY(-20px) rotate(0);opacity:1}100%{transform:translateY(60px) rotate(360deg);opacity:0}}
@keyframes dicaReveal{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
@keyframes logoEntrance{0%{transform:scale(0.5) rotate(-10deg);opacity:0}60%{transform:scale(1.1) rotate(2deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}

/* Dado girando ao clicar */
.dado-svg{width:100px;height:100px;filter:drop-shadow(0 6px 16px rgba(0,0,0,.3));animation:dadoFloat 2.5s ease-in-out infinite;transition:filter .2s;cursor:default}
.dado-spin{animation:dadoSpin .6s cubic-bezier(.36,.07,.19,.97) both !important}

/* Hex bonitão */
.hex-btn{
  width:56px;height:62px;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background:var(--pr);color:var(--br);border:none;
  font-size:14px;font-weight:700;font-family:var(--fd);
  cursor:pointer;transition:all .15s;
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.hex-btn::after{
  content:'';position:absolute;inset:0;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background:linear-gradient(135deg,rgba(255,255,255,.15),rgba(255,255,255,0));
}
.hex-btn:hover:not(:disabled){
  background:var(--am);color:var(--pr);
  transform:scale(1.15) translateY(-3px);
  filter:drop-shadow(0 6px 12px rgba(245,200,0,.5));
}
.hex-btn:active:not(:disabled){transform:scale(.95)}
.hex-btn:disabled{background:rgba(0,0,0,.15);cursor:default;opacity:.4}
.hex-btn.revelada{background:var(--vd);color:var(--br);animation:hexReveal .3s ease both}
.hex-btn.especial{background:linear-gradient(135deg,#ff6b35,#f7931e);color:#fff;animation:pulse 1.5s ease-in-out infinite}

/* Botão responder animado */
.btn-responder{
  width:100%;padding:16px;
  background:linear-gradient(135deg,var(--vd),#2ecc71);
  color:var(--br);border:none;border-radius:var(--r);
  font-size:16px;font-weight:800;font-family:var(--fd);
  cursor:pointer;transition:all .2s;
  box-shadow:0 4px 15px rgba(58,181,74,.4);
  letter-spacing:.5px;
  position:relative;overflow:hidden;
}
.btn-responder::after{
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
  transition:left .4s;
}
.btn-responder:hover::after{left:100%}
.btn-responder:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(58,181,74,.5)}
.btn-responder:active{transform:translateY(0);box-shadow:0 2px 8px rgba(58,181,74,.3)}

/* Btn verde animado */
.btn-verde{
  width:100%;padding:14px;
  background:linear-gradient(135deg,var(--vd),#27ae60);
  color:var(--br);border:none;border-radius:var(--rs);
  font-size:15px;font-weight:700;font-family:var(--fb);
  cursor:pointer;transition:all .2s;
  box-shadow:0 4px 12px rgba(58,181,74,.35);
}
.btn-verde:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(58,181,74,.45);filter:brightness(1.05)}
.btn-verde:active{transform:translateY(1px)}

/* Btn entrar animado */
.btn-entrar{
  width:100%;padding:14px;
  background:linear-gradient(135deg,var(--vd),#27ae60);
  color:var(--br);border:none;border-radius:var(--r);
  font-size:16px;font-weight:700;font-family:var(--fb);
  cursor:pointer;transition:all .2s;
  box-shadow:0 4px 15px rgba(58,181,74,.4);
}
.btn-entrar:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(58,181,74,.5)}
.btn-entrar:active{transform:translateY(1px)}

/* Logo animada */
.logo-img{max-width:280px;width:100%;height:auto;object-fit:contain;animation:logoEntrance .8s cubic-bezier(.34,1.56,.64,1) both}

/* Flash tela ao acertar/errar */
.tela-jogo.flash-verde{animation:bgFlashGreen .6s ease both}
.tela-jogo.flash-vermelho{animation:bgFlashRed .6s ease both}

/* Card acertou/errou melhorado */
.fb-box{
  width:100%;border-radius:var(--rl);padding:32px;text-align:center;
  box-shadow:0 8px 40px rgba(0,0,0,.2);background:var(--br);
  animation:bounceIn .4s cubic-bezier(.34,1.56,.64,1) both;
}
.fb-titulo{font-family:var(--fd);font-size:40px;font-weight:800;margin-bottom:8px;letter-spacing:-1px}
.fb-verde{color:var(--vd);text-shadow:0 2px 12px rgba(58,181,74,.3)}
.fb-vermelho{color:var(--vm);text-shadow:0 2px 12px rgba(224,58,58,.3)}
.fb-pontos{font-size:20px;font-weight:800;color:var(--vd);animation:ptsPop .5s ease .2s both}

/* Placar animado ao atualizar */
.placar-item.updated{animation:ptsPop .4s ease both}

/* Notif especial para dicas */
.notif-especial{
  position:fixed;top:80px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,#f7931e,#ff6b35);
  color:#fff;border-radius:20px;padding:10px 24px;
  font-family:var(--fd);font-size:18px;font-weight:800;
  box-shadow:0 8px 30px rgba(247,147,30,.5);
  z-index:400;animation:bounceIn .4s ease both;
  pointer-events:none;
}