/* Caçada às Bijuus: botão do lobby (lobby.js) e a tela (bijuu-ui.js) */
/* o ícone do PB (134×134, losango escuro e o círculo laranja com a Kurama) a 76, e o nome por baixo como o "Check in" e o
   "Rankings" ao lado; com a besta no mundo o ícone vira o rosto dela (nav/bijuu_<slug>.png, o losango de atividade do
   PB), pulsa, e o nome vira o tempo até ela fugir */
.lb-bijuu { width: 84px; height: 92px; line-height: 1; }
.lb-bijuu-icon { position: absolute; left: 50%; top: 0; width: 76px; height: 76px; transform: translateX(-50%); pointer-events: none; }
.lb-bijuu-label { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); white-space: nowrap; font-size: 21px; pointer-events: none; }
.lb-bijuu-dot { position: absolute; right: 8px; top: 4px; }
.lb-bijuu-live .lb-bijuu-icon { animation: bj-pulse 1.6s ease-in-out infinite; }
@keyframes bj-pulse { 0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 120, 30, .7)); } 50% { filter: drop-shadow(0 0 10px rgba(255, 170, 40, 1)); } }
/* sem besta no mundo ou abaixo do nível: cinza, com o cadeado (e o nível, quando é ele que falta), e desligado */
.lb-bijuu:disabled { cursor: default; }
.lb-bijuu:disabled:hover, .lb-bijuu:disabled:active { filter: none; }
.lb-bijuu.lb-locked .lb-bijuu-icon { filter: grayscale(1) brightness(.55); }
.lb-bijuu.lb-locked .lb-bijuu-label { color: #b9b2a0; }
.lb-bijuu > .lb-block { top: 20px; bottom: auto; }
.lb-bijuu.lb-locked > .lb-block { display: flex; }

/* a tela: a arena do World Boss do original (bg_sjbossimage) atrás, o canvas das figuras e as camadas do design por cima */
#screen-bijuu { position: relative; overflow: hidden; background: #000; }
.bj { overflow: clip; background: #120604 url('/assets/ui/bijuu/bg_sjbossimage.jpg') center / cover no-repeat; }
.bj-cv { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bj-ui { pointer-events: none; }
.bj .cc-img, .bj .cc-s9, .bj .cc-text, .bj .cc-bar, .bj .cc-panel, .bj .cc-atlas { pointer-events: none !important; }
.bj .cc-btn, .bj button, .bj-scroll { pointer-events: auto; }
.bj .cc-text { text-shadow: 0 2px 2px #000, 1px 0 #000, -1px 0 #000; }
.bj-label { display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; white-space: nowrap;
  pointer-events: none; text-shadow: 0 2px 2px #000, 1px 0 #000, -1px 0 #000; }
.bj-button { position: absolute; border: 0; background: transparent center / 100% 100% no-repeat; color: #fff; font: 22px 'FZCuYuan', sans-serif;
  text-shadow: 0 2px 2px #000, 1px 0 #000, -1px 0 #000; cursor: pointer; }
.bj-button:active { filter: brightness(.85); }
.bj-gray, .bj .cc-btn.bj-gray:hover, .bj .cc-btn.bj-gray:active { filter: grayscale(1) brightness(.8); }
/* título: a faixa do original com o nome desta tela */
.bj-title { pointer-events: none; }
.bj-title img { position: absolute; inset: 0; width: 100%; height: 100%; }
.bj-title span { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); white-space: nowrap; color: #fff; font-size: 24px; font-style: italic;
  letter-spacing: .5px; text-shadow: 0 0 6px #b12bd8, 2px 2px 0 #3d0b52, -1px -1px 0 #3d0b52, 1px -1px 0 #3d0b52, -1px 1px 0 #3d0b52; }
.bj-rule img { width: 44px; height: 44px; }
/* a besta: o nome na faixa e a linha de baixo da vida */
.bj-name { color: #fff3c2; font-size: 20px; overflow: hidden; text-overflow: ellipsis; }
.bj-info { color: #ffd88a; }
.bj .bj-still { display: none; object-fit: contain; pointer-events: none; filter: drop-shadow(0 0 18px rgba(255, 90, 20, .8)); }
.bj:not(.bj-has3d):not(.bj-none) .bj-still { display: block; }
.bj-names, .bj-killed, .bj-beasts { left: 0; bottom: 0; width: 960px; height: 640px; pointer-events: none; }
.bj-names > *, .bj-killed > *, .bj-beasts > * { position: absolute; }
.bj-killed[hidden], .bj-label[hidden] { display: none; }
.bj-pname { color: #fff; overflow: hidden; text-overflow: ellipsis; }
.bj-pname.bj-me { color: #16f2ce; }
/* o ranking de dano do painel de baixo (linhas do modelo Panel_1.cell) */
.bj-scroll { position: absolute; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #8b6141 #1e1921; }
.bj-cell { position: relative; flex: none; width: 265px; height: 24px; }
.bj-cell > *, .bj-row > * { position: absolute; }
.bj-cell .cc-text { text-shadow: 1px 1px 1px #000; }
.bj-cell [data-id$=".name_lab"] { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.bj-cell.bj-mine .cc-text { color: #16f2ce !important; }
.bj-empty-row { padding: 26px 0 0; text-align: center; color: #c8b9a4; font-size: 17px; text-shadow: 1px 1px 1px #000; }
/* sem besta no mundo */
.bj-last { color: #ffd88a; }
.bj-hint { color: #f0e2cc; white-space: normal; line-height: 1.25; }
.bj-beast img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.bj-beast img:first-child { width: 76px; height: 76px; }
.bj-beast .pic { width: 64px; height: 64px; object-fit: contain; }
.bj-beasts-title { color: #fff3c2; }
.bj-hicon .lu-icon { position: absolute; left: 0; top: 0; transform: scale(.7); transform-origin: 50% 50%; }
.bj-hicon-sm .lu-icon { transform: scale(.55); }
.bj-nolv .lu-ic-lv { display: none; }
/* popups */
.bj-popup { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
.bj-mask { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); pointer-events: auto; }
.bj-popup .lb-group { z-index: 1; }
.bj-row { position: relative; flex: none; width: 735px; height: 102px; }
.bj-row [data-id$=".name_lab"] { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.bj-prize { transform-origin: 50% 50%; pointer-events: auto; }
.bj-prize .it-icon { position: absolute; left: 0; top: 0; }
.bj-note { color: #e6d7f0; white-space: normal; line-height: 1.3; }
.bj-rule-line { padding: 6px 10px; color: #fff; font-size: 19px; line-height: 1.35; text-shadow: 1px 1px 1px #000; }
.bj-rule-line b { color: #ffd800; font-weight: normal; }
.bj-rule-head { padding-top: 12px; color: #ffd800; font-size: 21px; }
.bj-rule-super b { color: #ff9b5a; }
.bj-fit { object-fit: contain; }