/* BÔNUS DO PASSE QUE CRESCE (01/11, opção A do autor; src/online/passe-bonus-dia.js, SQL 2496/2499):
   na bandeja de bônus, o rosto do herói no set do tema com um anel dourado que enche até o teto (--bb-anel, 0 a 1).
   A caixa é curta (autor: "achei ele largo demais ... no celular vai ficar gigante"). */
.bandeja-bonus .bb-item.pbd-anel{position:relative}
.bandeja-bonus .bb-item.pbd-anel>i.bb-rosto{width:38px;height:38px;padding:0;overflow:hidden;position:relative;border-color:#f3cf7a;
  background:radial-gradient(circle at 50% 60%,rgba(243,207,122,.4),rgba(10,6,18,.96) 72%);box-shadow:0 0 8px 1px rgba(255,200,90,.45),0 3px 10px rgba(0,0,0,.45)}
.bandeja-bonus .bb-item.pbd-anel>i.bb-rosto>span{position:absolute;inset:0;border-radius:inherit;background-repeat:no-repeat}
/* o anel: um contorno em volta do ícone que enche no sentido do relógio (o resto fica escuro) */
.bandeja-bonus .bb-item.pbd-anel::after{content:"";position:absolute;top:-3px;left:50%;width:44px;height:44px;transform:translateX(-50%);box-sizing:border-box;
  border-radius:12px;padding:3px;z-index:3;pointer-events:none;
  background:conic-gradient(#ffe48a 0 calc(var(--bb-anel,0) * 100%),rgba(0,0,0,.55) calc(var(--bb-anel,0) * 100%) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  filter:drop-shadow(0 0 4px rgba(255,210,100,.95))}
.bandeja-bonus .bb-item.pbd-anel .bb-selo{z-index:5;background:linear-gradient(180deg,#ffe48a,#d8a43c 60%,#3a2408);color:#1d1204}
.bandeja-bonus .bb-item.pbd-anel .bb-legenda{color:#ffe08a}
@media (max-width:560px){
  .bandeja-bonus .bb-item.pbd-anel>i.bb-rosto{width:34px;height:34px}
  .bandeja-bonus .bb-item.pbd-anel::after{width:40px;height:40px}
}
/* a caixa curta */
.bandeja-caixa.bb-caixa-curta{width:min(196px,62vw);padding:8px 10px}
.bandeja-caixa.bb-caixa-curta strong{font-size:.95em;margin-bottom:5px}
.bandeja-caixa.bb-caixa-curta p{font-size:.88em;line-height:1.3}
.bandeja-caixa.bb-caixa-curta .bb-usar{margin-top:6px;min-height:24px}
.bandeja-caixa .pbd-dias{display:grid;grid-template-columns:repeat(30,1fr);gap:1px;align-items:center;margin:0 0 5px}
.bandeja-caixa .pbd-dias i{height:6px;border-radius:2px;background:rgba(255,255,255,.13)}
.bandeja-caixa .pbd-dias i.marco{height:8px}
.bandeja-caixa .pbd-dias i.on{background:linear-gradient(180deg,#ffe9a8,#e0a93a);box-shadow:0 0 3px rgba(255,200,90,.6)}
.bandeja-caixa .pbd-dias i.hoje{background:linear-gradient(180deg,#fff6d6,#ffc94d);box-shadow:0 0 6px 1px rgba(255,214,110,.85)}
@media (orientation:landscape) and (max-height:500px){.bandeja-caixa.bb-caixa-curta{width:min(220px,45vw)}}
/* na Loja › Passe Lendário, em cima da lista do Passe e do Premium (passe-ui.js, fraseDaCompra) */
.passe-bonus-frase{display:block;margin-top:6px;padding:6px 10px;border-left:3px solid #ffd877;border-radius:8px;text-align:left;
  background:linear-gradient(90deg,rgba(255,214,110,.18),rgba(255,214,110,.04));color:#ffe7a6;font-size:calc(12.5px * var(--text-scale,1));line-height:1.3}
.passe-bonus-frase b{display:block;font-weight:800;color:#ffd877;overflow-wrap:anywhere}
.passe-bonus-frase small{display:block;font-size:calc(11px * var(--text-scale,1));font-weight:600;color:#efe0b8;overflow-wrap:anywhere}