/* Ajudante fora do jogo (js/ajudante_fora.js) */
/* o tutorial dos iniciantes fica no mesmo canto: enquanto ele aparece, o botão sai da frente */
body:has(#tutorial:not(.hidden)) #hud-equipe { display: none; }
.pe2 .af-horas { display: flex; gap: 8px; margin: 8px 0 12px; flex-wrap: wrap; }
.pe2 .af-horas button.ativo { outline: 3px solid #f0a020; }
.pe2 .af-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.pe2 .af-num { background: rgba(0,0,0,.06); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; }
.pe2 .af-num span { font-size: 12px; opacity: .8; }
.pe2 .af-num b { font-size: 18px; }
.pe2 .af-num.pos b { color: #2e7d32; }
.pe2 .af-num.neg b { color: #b23b2b; }
.pe2 .af-num.lucro { background: #e3f5e5; }
.pe2 .af-num.lucro b { color: #1b6e23; }
.pe2 .af-num.prejuizo { background: #fbe4e1; }
.pe2 .af-num.prejuizo b { color: #a3261a; }
.pe2 .af-alerta { background: #fff3cd; border-radius: 10px; padding: 8px 10px; margin: 10px 0 0; }
.pe2 h3 { margin: 16px 0 6px; font-size: 16px; }
.pe2 .af-sug { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.pe2 .af-sug li { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.05); border-radius: 10px; padding: 8px 10px; }
.pe2 .af-sug li > span:nth-child(2), .pe2 .af-sug li > span:only-child { flex: 1; }
.pe2 .af-sug li.eq-ok { opacity: .75; }                                   /* equipamento sem melhoria a sugerir: só o motivo */
.pe2 .af-sug li button:disabled { opacity: .55; cursor: default; }
.pe2 .af-delta { font-weight: 800; color: #1b6e23; white-space: nowrap; }
.pe2 .af-pratos { display: flex; flex-direction: column; gap: 6px; }
.pe2 .af-prato { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: rgba(0,0,0,.04); cursor: pointer; }
.pe2 .af-prato.desligado { opacity: .55; }
.pe2 .af-prato input { width: 20px; height: 20px; }
.pe2 .af-prato img { width: 40px; height: 40px; object-fit: contain; }
.pe2 .af-nome { flex: 1; font-weight: 700; }
.pe2 .af-tag { font-size: 11px; background: #ffe08a; border-radius: 8px; padding: 1px 6px; font-weight: 700; }
.pe2 .af-cols { display: flex; gap: 14px; text-align: right; }
.pe2 .af-cols span { display: flex; flex-direction: column; font-weight: 700; }
.pe2 .af-cols small { font-weight: 400; opacity: .7; font-size: 11px; }
@media (max-width: 560px) {
  .pe2 .af-prato { flex-wrap: wrap; }
  .pe2 .af-cols { width: 100%; justify-content: flex-end; }
}
.pe2 .af-cols .pos { color: #1b6e23; }
.pe2 .af-cols .neg { color: #a3261a; }
/* o jogo tem estilo geral para label: aqui a linha do prato fica deitada */
.pe2 label.af-prato { display: flex !important; flex-direction: row !important; align-items: center; text-align: left; width: auto; margin: 0; }
.pe2 label.af-prato > * { margin: 0; }
.pe2 label.af-prato input[type=checkbox] { display: inline-block; flex: none; }
/* ajudantes contratados e a vaga */
.pe2 .af-equipe { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.pe2 .af-ajud { background: rgba(0,0,0,.05); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.pe2 .af-ajud.vaga { align-items: center; justify-content: center; text-align: center; border: 2px dashed rgba(0,0,0,.18); background: transparent; }
.pe2 .af-ajud.vaga.cheia { opacity: .75; }
.pe2 .af-ajud-ic { font-size: 30px; line-height: 1; }
.pe2 .af-ajud-nome { font-weight: 800; font-size: 16px; }
.pe2 .af-ajud-desde { font-size: 12px; opacity: .75; }
.pe2 .af-stat { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.pe2 .af-ajud-pe { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; }

/* tabela "quantos atendentes" */
.pe2 .pe2-tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.pe2 .pe2-tabela th, .pe2 .pe2-tabela td { padding: 6px 8px; text-align: right; border-bottom: 1px solid rgba(0,0,0,.08); }
.pe2 .pe2-tabela th:first-child, .pe2 .pe2-tabela td:first-child { text-align: left; }
.pe2 .pe2-tabela tr.atual td { background: rgba(240,160,32,.15); font-weight: 700; }
.pe2 .pe2-tabela .melhor { color: #1b6e23; font-weight: 800; }
.pe2 .pe2-tabela .neg { color: #a3261a; }
.pe2 .pe2-tabela .pos { color: #1b6e23; }
/* botão Equipe: logo acima da Loja (#hud-loja: 14px do fundo, 78px de altura) */
#hud-equipe { position: absolute; left: 14px; bottom: 102px; z-index: 5; }
@media (max-width: 700px) {
  #hud-equipe { left: 8px; bottom: 80px; }
  #hud-equipe .hud-btn { width: 62px; height: 62px; font-size: 10px; }
  #hud-equipe .hud-btn img { height: 30px; }
}
/* abas da janela Equipe */
.pe2 .pe2-abas { display: flex; gap: 8px; padding: 8px 14px 0; }
.pe2 .pe2-abas button { flex: 1; border-radius: 14px 14px 0 0; opacity: .7; font-size: 16px; font-weight: 800; padding: 10px 8px; }
.pe2 .pe2-abas button.ativo { opacity: 1; outline: 3px solid #f0a020; outline-offset: -3px; }
/* temperos no chão (js/expansao.js): caem do objeto, ficam pulando de leve e o jogador toca para pegar */
#tp-chao { position: fixed; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
/* seta amarela em cima do Expandir quando já dá para expandir (expansao.js poeSeta, 26/10/2026) */
#exp-seta { position: fixed; left: 0; top: 0; width: 50px; height: 50px; z-index: 30; cursor: pointer; display: none; }   /* tocar abre a expansão */
#exp-seta::before { content: ""; position: absolute; inset: 0; animation: exp-seta-pula .6s ease-in-out infinite alternate;
  background: url(../assets/ui/ic/seta_expandir_baixo.png) center / contain no-repeat;       /* arte da IA (PEDIDOS_IA_SETAS.txt) */
  filter: drop-shadow(0 3px 2px rgba(0,0,0,.3)); }
@keyframes exp-seta-pula { from { transform: translateY(-7px); } to { transform: translateY(0); } }
.tp-item { position: absolute; left: 0; top: 0; width: 48px; height: 48px; padding: 0; margin: 0; border: 0; background: none;
           pointer-events: auto; cursor: pointer; transform-origin: 50% 85%; will-change: transform; }
.tp-item::before { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 10px; border-radius: 50%; background: rgba(0,0,0,.25); }
.tp-pula { display: block; width: 48px; height: 48px; font-size: 36px; line-height: 44px; text-align: center; animation: tp-flutua 1.6s ease-in-out infinite;
           filter: drop-shadow(0 0 6px rgba(255,230,140,.9)); }
.tp-pula img { width: 44px; height: 44px; object-fit: contain; }
@keyframes tp-flutua { 0%, 100% { transform: translateY(-6px); } 50% { transform: translateY(-14px); } }
/* caindo do objeto até o chão (--dx/--dy: de onde saiu, em relação a onde cai) */
.tp-novo .tp-pula { animation: tp-cai .7s cubic-bezier(.3,.6,.4,1) both, tp-flutua 1.6s ease-in-out .7s infinite; }
@keyframes tp-cai { 0% { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; }
                    45% { transform: translate(calc(var(--dx) / 2), calc(var(--dy) / 2 - 60px)) scale(1.1); opacity: 1; }
                    75% { transform: translate(0, 0) scale(1); } 87% { transform: translate(0, -14px); } 100% { transform: translateY(-6px); } }
.tp-pegando { pointer-events: none; z-index: 61; }
.tp-pegando .tp-pula { animation: none; }
@keyframes tp-pulsa { 0% { transform: scale(1); } 35% { transform: scale(1.18); filter: brightness(1.25); } 100% { transform: scale(1); } }
.tp-chegou { animation: tp-pulsa .45s ease-out; }
/* janela Expandir (js/expansao.js): requisitos, botão e temperos guardados */
#expansao { max-width: 560px; }
.pe2 .exp-tam { margin: 0 0 10px; }
.pe2 .exp-req { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 6px; }
.pe2 .exp-req li { display: flex; align-items: center; gap: 10px; border-radius: 10px; padding: 8px 10px; background: #fbe4e1; }
.pe2 .exp-req li.ok { background: #e3f5e5; }
.pe2 .exp-req li b { white-space: nowrap; }
.pe2 .exp-req li i { font-style: normal; font-weight: 900; width: 18px; text-align: center; color: #a3261a; }
.pe2 .exp-req li.ok i { color: #1b6e23; }
.pe2 .exp-nome { flex: 1; font-weight: 700; display: flex; flex-direction: column; }
.pe2 .exp-nome small { font-weight: 400; opacity: .7; font-size: 12px; }
.pe2 .exp-ic { width: 30px; height: 30px; object-fit: contain; font-size: 24px; line-height: 30px; text-align: center; flex: none; }
.pe2 .exp-ok { width: 100%; font-size: 17px; padding: 12px; }
.pe2 .exp-ok:disabled { opacity: .6; cursor: default; }
.pe2 .exp-temperos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pe2 .exp-temperos > div { background: rgba(0,0,0,.05); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.pe2 .exp-temperos b { font-size: 20px; }
.pe2 .exp-temperos span { font-size: 12px; opacity: .8; }