/* BANDEJA DE BÔNUS (23/10, escolha do autor "Ideia 1": ícones, e a caixa de texto só ao clicar) — src/ui/bandeja-bonus.js.
   Boost de EXP e Bênçãos da Caçada viram ícones pequenos com o valor no selinho e o tempo embaixo.
   A posição (left/top) é medida pelo bandeja-bonus.js: no PC à direita do quadro da área, no celular abaixo do quadro da área. */
.bandeja-bonus{position:absolute;z-index:14;display:flex;flex-wrap:wrap;gap:7px;row-gap:10px;align-items:flex-start;pointer-events:none}
.bandeja-bonus[hidden]{display:none!important}
.bandeja-bonus>*{pointer-events:auto}
.bandeja-bonus .bb-item{position:relative;display:grid;justify-items:center;gap:2px;padding:0;margin:0;border:0;background:none;
  cursor:var(--cur-mao,pointer);color:inherit;font:inherit;-webkit-tap-highlight-color:transparent}
.bandeja-bonus .bb-item>i{width:34px;height:34px;box-sizing:border-box;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(30,26,20,.92),rgba(12,12,16,.94));border:1px solid rgba(243,207,122,.55);
  box-shadow:0 3px 10px rgba(0,0,0,.45);transition:border-color .15s,box-shadow .15s}
.bandeja-bonus .bb-item>i img{width:24px;height:24px;object-fit:contain}
.bandeja-bonus .bb-item:hover>i,.bandeja-bonus .bb-item[aria-expanded="true"]>i{border-color:#ffd56a;box-shadow:0 0 0 1px rgba(255,213,106,.5),0 3px 12px rgba(0,0,0,.5)}
.bandeja-bonus .bb-item.apagado>i img{filter:grayscale(.6) brightness(.8)}
.bandeja-bonus .bb-selo{position:absolute;top:-6px;right:-9px;font:800 calc(9px * var(--text-scale,1))/1 system-ui,sans-serif;white-space:nowrap;
  background:#2f8f3e;color:#fff;border-radius:6px;padding:2px 4px;border:1px solid rgba(0,0,0,.45)}
.bandeja-bonus .bb-item.apagado .bb-selo{background:#6b5a2e}
.bandeja-bonus .bb-legenda{font:700 calc(10px * var(--text-scale,1))/1.1 system-ui,sans-serif;color:#f3e3b8;text-shadow:0 1px 2px #000,0 0 3px #000;white-space:nowrap}
.bandeja-bonus .bb-item.apagado .bb-legenda{color:#ffd56a}
/* 29/10 (autor: "tem ícone que não tá se alinhando" e depois "era pra eles ficarem lado a lado como antes, mas alguns
   ficavam grandes demais por causa dos textos"): todo item tem a mesma largura, só um pouco maior que o quadrado, e
   ficam juntinhos; a legenda comprida (bb-longa, bandeja-bonus.js) usa letra um pouco menor e pode passar da largura
   do item sem empurrar os vizinhos. O selinho fica preso ao quadrado, não à borda do item. */
.bandeja-bonus{--bb-larg:calc(36px * var(--text-scale,1) + 6px);--bb-ic:34px;gap:4px}
.bandeja-bonus .bb-item{width:var(--bb-larg);flex:0 0 var(--bb-larg);min-width:0;grid-template-columns:minmax(0,1fr)}
.bandeja-bonus .bb-legenda{justify-self:center}
.bandeja-bonus .bb-legenda.bb-longa{font-size:calc(8.5px * var(--text-scale,1));letter-spacing:-.2px}
.bandeja-bonus .bb-selo{right:calc(50% - var(--bb-ic) / 2 - 9px)}
.bandeja-bonus .bb-item.brilha,.bandeja-bonus .bb-item.passe-fim{--bb-ic:38px}
/* SKINS DE DATA (2378, 28/10, autor: "um iconezinho girando ... com uma cabeça de abóbora" e "brilhoso e chamativo"):
   a abóbora fica de frente e dá um giro rápido a cada 4 s (de lado ela some, então o giro é curto), com o quadro
   brilhando em laranja. Na venda, para quem ainda não tem: brilha igual, sem girar. "Reduzir movimento": parada. */
.bandeja-bonus .bb-item.brilha>i{width:38px;height:38px;border-color:#ffb15a;
  background:radial-gradient(circle at 50% 55%,rgba(255,140,30,.55),rgba(60,20,70,.95) 70%);animation:bbBrilho 1.8s ease-in-out infinite}
.bandeja-bonus .bb-item.brilha>i img{width:30px;height:30px;filter:drop-shadow(0 0 4px rgba(255,170,60,.9)) drop-shadow(0 0 1px #fff3)}
.bandeja-bonus .bb-item.brilha .bb-legenda{color:#ffc46e}
.bandeja-bonus .bb-item.brilha .bb-selo{background:linear-gradient(180deg,#ff9a2e,#d0560f)}
.bandeja-bonus .bb-item.gira>i img{animation:bbGira 4s ease-in-out infinite}
@keyframes bbGira{0%,72%{transform:perspective(80px) rotateY(0)}100%{transform:perspective(80px) rotateY(360deg)}}
@keyframes bbBrilho{0%,100%{box-shadow:0 0 6px 1px rgba(255,140,30,.55),0 3px 10px rgba(0,0,0,.45)}50%{box-shadow:0 0 16px 5px rgba(255,150,40,.9),0 3px 10px rgba(0,0,0,.45)}}
@media (prefers-reduced-motion:reduce){.bandeja-bonus .bb-item.gira>i img,.bandeja-bonus .bb-item.brilha>i{animation:none}}

/* PASSE ACABANDO (28/10, autor: "estilo o da abobora ... com uma foto só do rosto do personagem e um efeito do tema"):
   o rosto é a arte do set do tema recortada (passe-fim-aviso.js manda tamanho e posição do fundo); --bb-cor = cor do tema. */
.bandeja-bonus .bb-item.passe-fim>i.bb-rosto{width:38px;height:38px;padding:0;overflow:hidden;position:relative;border-color:rgb(var(--bb-cor,243,207,122));
  background:radial-gradient(circle at 50% 60%,rgba(var(--bb-cor,243,207,122),.45),rgba(10,6,18,.96) 72%)}
.bandeja-bonus .bb-item.passe-fim>i.bb-rosto>span{position:absolute;inset:0;border-radius:inherit;background-repeat:no-repeat}
.bandeja-bonus .bb-item.passe-fim .bb-selo{background:linear-gradient(180deg,rgb(var(--bb-cor,243,207,122)),rgba(var(--bb-cor,243,207,122),.6) 60%,#1a0f22)}
.bandeja-bonus .bb-item.passe-fim .bb-legenda{color:rgb(var(--bb-cor,243,207,122));filter:brightness(1.45)}
/* Opção B do autor (28/10, "Névoa do tema"): a névoa da cor do tema sobe por cima do rosto (dois fiapos que se revezam). */
.bandeja-bonus .bb-item.passe-fim>i.bb-rosto{box-shadow:0 0 10px 2px rgba(var(--bb-cor),.7),0 3px 10px rgba(0,0,0,.45)}
.bandeja-bonus .bb-item.passe-fim>i.bb-rosto::before,.bandeja-bonus .bb-item.passe-fim>i.bb-rosto::after{content:"";position:absolute;left:-20%;right:-20%;bottom:-30%;height:70%;
  background:radial-gradient(ellipse at 30% 60%,rgba(var(--bb-cor),.85),transparent 60%),radial-gradient(ellipse at 75% 70%,rgba(var(--bb-cor),.6),transparent 55%);
  filter:blur(2px);mix-blend-mode:screen;animation:bbNevoa 3.2s ease-in-out infinite;pointer-events:none}
.bandeja-bonus .bb-item.passe-fim>i.bb-rosto::after{animation-delay:-1.6s;transform:scaleX(-1)}
@keyframes bbNevoa{0%{transform:translateY(25%);opacity:0}35%{opacity:.95}100%{transform:translateY(-70%);opacity:0}}
@media (prefers-reduced-motion:reduce){.bandeja-bonus .bb-item.passe-fim>i.bb-rosto,.bandeja-bonus .bb-item.passe-fim>i.bb-rosto>span,
  .bandeja-bonus .bb-item.passe-fim>i.bb-rosto::before,.bandeja-bonus .bb-item.passe-fim>i.bb-rosto::after{animation:none}}

/* RECOLHER (29/10, opção A do autor: "um limite de evento lado a lado e descer abaixo os outros ... e ter um > pra
   recolher"): bandeja-bonus.js limita a fileira a 4 ícones e põe a setinha no fim; recolhida, fica só o ícone EVENTOS
   com o número no selinho. A setinha é estreita (meio ícone) para não roubar lugar de evento. */
.bandeja-bonus .bb-geral,.bandeja-bonus .bb-seta{position:relative;display:grid;justify-items:center;gap:2px;padding:0;margin:0;border:0;background:none;
  cursor:var(--cur-mao,pointer);color:inherit;font:inherit;-webkit-tap-highlight-color:transparent}
.bandeja-bonus .bb-geral[hidden],.bandeja-bonus.bb-recolhida .bb-item{display:none!important}
.bandeja-bonus .bb-geral{width:var(--bb-larg);flex:0 0 var(--bb-larg);grid-template-columns:minmax(0,1fr)}
.bandeja-bonus .bb-geral>i{width:var(--bb-ic);height:var(--bb-ic);box-sizing:border-box;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(30,26,20,.92),rgba(12,12,16,.94));border:1px solid rgba(243,207,122,.55);box-shadow:0 3px 10px rgba(0,0,0,.45)}
.bandeja-bonus .bb-geral>i img{width:calc(var(--bb-ic) - 8px);height:calc(var(--bb-ic) - 8px);object-fit:contain}
.bandeja-bonus .bb-geral .bb-selo{background:#b8322a;right:calc(50% - var(--bb-ic) / 2 - 9px)}
.bandeja-bonus .bb-geral.brilha>i{border-color:#ffb15a;animation:bbBrilho 1.8s ease-in-out infinite}
.bandeja-bonus .bb-seta{flex:0 0 auto;align-self:flex-start}
.bandeja-bonus .bb-seta>i{width:20px;height:var(--bb-ic);box-sizing:border-box;border-radius:7px;display:grid;place-items:center;font:900 16px/1 system-ui,sans-serif;
  font-style:normal;color:#ffd56a;background:rgba(14,12,9,.82);border:1px solid rgba(243,207,122,.4)}
.bandeja-bonus .bb-geral:hover>i,.bandeja-bonus .bb-seta:hover>i{border-color:#ffd56a}
.bandeja-bonus .bb-geral:focus-visible>i,.bandeja-bonus .bb-seta:focus-visible>i{outline:2px solid #ffd56a;outline-offset:1px}
@media (prefers-reduced-motion:reduce){.bandeja-bonus .bb-geral.brilha>i{animation:none}}

/* A caixa de texto: só ao clicar num ícone. */
.bandeja-caixa{position:absolute;z-index:31;width:min(240px,80vw);box-sizing:border-box;padding:10px 12px;border-radius:10px;
  background:linear-gradient(180deg,#1b1a20,#121318);border:1px solid #c9a24d;color:#efe6cf;
  font-size:calc(12.5px * var(--text-scale,1));line-height:1.4;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.bandeja-caixa[hidden]{display:none!important}
/* 27/10 (Bônus de Recomeço, 2322): celular deitado é baixo; a caixa larga cabe acima da barra de baixo com texto 130%. */
@media (orientation:landscape) and (max-height:500px){.bandeja-caixa{width:min(360px,60vw)}}
.bandeja-caixa p{white-space:pre-line}
.bandeja-caixa strong{display:block;color:#ffd56a;margin-bottom:3px}
.bandeja-caixa p{margin:0}
.bandeja-caixa .bb-usar{margin-top:8px;width:100%;min-height:30px;border-radius:8px;border:1px solid var(--botao-ouro-borda);cursor:var(--cur-mao,pointer);
  background:var(--botao-ouro-fundo);color:var(--botao-ouro-texto);font-weight:800;letter-spacing:.5px;font-size:calc(11.5px * var(--text-scale,1))}
.bandeja-caixa .bb-usar:disabled{opacity:.6;cursor:var(--cur-seta,default)}
/* 28/10 (aviso do passe): o botão de recusar (Esconder Aviso) é discreto, sem competir com o ATIVAR AGORA. */
.bandeja-caixa .bb-usar.fraco{margin-top:6px;min-height:26px;background:none;border-color:rgba(239,230,207,.28);color:#cfc4a8;font-weight:700;letter-spacing:0}

@media (max-width:900px){
  /* a bandeja começa na borda esquerda, logo abaixo do quadro da área; o retrato da Party desce para baixo dela */
  html:not(#_):not(#__) #gameShell #monsterCard.com-bandeja>#partyContractWidget{top:var(--bb-fim,131px)!important}
  /* 27/10: o botão NOVIDADES (novidades.css) morava no mesmo canto e cobria os ícones; com a bandeja ele desce para baixo dela */
  #monsterCard.com-bandeja>.nov-botao{top:max(var(--nov-topo-cel,84px),var(--bb-fim,84px))}
  .bandeja-bonus{gap:4px;--bb-ic:30px}
  .bandeja-bonus .bb-item.brilha{--bb-ic:38px}
  .bandeja-bonus .bb-item.passe-fim{--bb-ic:34px}
  .bandeja-bonus .bb-item>i{width:30px;height:30px}
  .bandeja-bonus .bb-item>i img{width:21px;height:21px}
  .bandeja-bonus .bb-item.passe-fim>i.bb-rosto{width:34px;height:34px}
}

/* A FAIXA EMBAIXO DA ARENA (28/10, escolha do autor "B + C"): no celular em pé a bandeja e os avisos do servidor
   saem da arena e moram aqui (avisos-ui.js COL_FAIXA_ARENA). Some quando está vazia. Fora do celular em pé, escondida. */
.faixa-sob-arena{display:none}
@media (max-width:640px){
  .faixa-sob-arena{position:relative;z-index:20;display:flex;align-items:center;gap:8px;min-height:44px;box-sizing:border-box;
    margin:6px 0 0;padding:14px 10px 5px;border:1px solid #4a3a1c;border-radius:12px;background:linear-gradient(180deg,#1a140b,#100c07)}
  .faixa-sob-arena[hidden]{display:none!important}
  /* 28/10 (autor, foto do Android: "menu todo torto, após um tempo ele se alinha"): um aviso comprido do servidor espremia
     os ícones de bônus em 2-3 linhas até sumir. Os ícones ficam numa fileira; o aviso fica ao lado se couber em 150 px,
     senão desce para uma linha só dele. */
  .faixa-sob-arena{flex-wrap:wrap;row-gap:6px}
  .faixa-sob-arena .faixa-bonus{flex:0 0 auto;min-width:0;max-width:100%}
  .faixa-sob-arena .faixa-avisos{flex:1 1 150px;min-width:min(150px,100%);display:flex;justify-content:flex-end}
  .faixa-sob-arena .bandeja-bonus{position:static;flex-wrap:wrap;row-gap:4px;max-width:none}
  .faixa-sob-arena .bandeja-bonus .bb-legenda{font-size:calc(9px * var(--text-scale,1))}
  /* a caixa abre para CIMA, por cima do pé da arena: para baixo ela saía da tela num celular baixo */
  .faixa-sob-arena .bandeja-caixa{top:auto!important;bottom:calc(100% + 6px)!important}
  .faixa-sob-arena .col-avisos{position:static;align-items:flex-end;max-width:100%}
  .faixa-sob-arena .col-aviso{max-width:100%;gap:5px;padding:3px 9px 3px 4px;font-size:calc(10.5px*var(--text-scale,1));border-radius:10px;box-shadow:none}
  .faixa-sob-arena .col-aviso-icone{width:18px;height:18px}
  .faixa-sob-arena .col-aviso-retrato .cj-avatar{--cj-tam:18px !important}
}
/* OFERTA DE NOVEMBRO (2678, 06/11, autor: "uma JOD com efeito vermelho brilhoso com o desconto por cima"): a JoD num
   quadro vermelho que pulsa e o "-25%" grande por cima dela. "Reduzir movimento": parada. */
.bandeja-bonus .bb-item.pq-bb{--bb-ic:38px}
.bandeja-bonus .bb-item.pq-bb>i{width:38px;height:38px;border-color:#f87171;background:radial-gradient(circle at 50% 50%,rgba(239,68,68,.6),rgba(40,8,12,.95) 72%);animation:pqBrilho 1.6s ease-in-out infinite}
.bandeja-bonus .bb-item.pq-bb>i img{width:28px;height:28px;filter:drop-shadow(0 0 4px rgba(255,80,80,.95)) drop-shadow(0 0 1px #fff4)}
.bandeja-bonus .bb-item.pq-bb .bb-selo{top:21px;right:auto;left:50%;transform:translateX(-50%);background:linear-gradient(180deg,#ef4444,#991b1b);color:#fff;font-weight:900;border:1px solid #fecaca;font-size:calc(10px * var(--text-scale,1))}
.bandeja-bonus .bb-item.pq-bb .bb-legenda{color:#fca5a5}
@keyframes pqBrilho{0%,100%{box-shadow:0 0 6px 1px rgba(239,68,68,.55),0 3px 10px rgba(0,0,0,.45)}50%{box-shadow:0 0 16px 5px rgba(248,90,90,.95),0 3px 10px rgba(0,0,0,.45)}}
@media (prefers-reduced-motion:reduce){.bandeja-bonus .bb-item.pq-bb>i{animation:none;box-shadow:0 0 10px 3px rgba(239,68,68,.7)}}