/* Arena (arena-ui.js, arena-popups.js, arena-battle.js) */
#screen-arena, #screen-arenabattle { position: relative; overflow: hidden; background: #000; }
.ar-pass { pointer-events: none !important; }
/* os nós dos layouts montados fora dos grupos de encaixe (cartões, linhas das listas, balão, telas da luta) */
.ar-bar > *, .ar-bubble > *, .ar-vrow > *, .ar-mrow > *, .ar-cell > *, .ar-npcell > *, .ab-wl .lb-group > *, .ab-vs .lb-group > * { position: absolute; }

/* o alto: o retrato da Arena (middlepic 183×72) */
.ar-portrait { position: absolute; cursor: pointer; pointer-events: auto; }
/* a faixa do rosto tem fundo (o middlepic do KOF era recortado): as pontas somem nas listras do painel, sem a caixa azul */
.ar-portrait img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28%, #000 74%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 28%, #000 74%, transparent 100%); }
.ar-ticket { position: absolute; pointer-events: none; }
.ar-hintbox { position: absolute; pointer-events: none; transition: opacity .25s; }
.ar-hintbox img { position: absolute; left: 50%; top: 50%; width: 191px; height: 88px; transform: translate(-50%, -50%); }
.ar-hintbox span { position: absolute; left: 50%; top: 46%; width: 200px; transform: translate(-50%, -50%); text-align: center; white-space: normal;
  font-size: 21px; line-height: 1.05; color: rgb(102, 50, 13); text-shadow: none; }
.ar-hintbox.ar-fade { opacity: 0; }

/* a lista de cartões (TableView horizontal recortado) */
.ar-list { position: absolute; overflow: hidden; touch-action: pan-y; pointer-events: auto; }
.ar-strip { position: absolute; left: 0; bottom: 0; height: 100%; }
.ar-cell { position: absolute; bottom: 0; width: 180px; height: 375px; cursor: pointer; }
.ar-bar { position: absolute; bottom: 0; width: 182px; height: 375px; }
.ar-bar .cc-btn { pointer-events: auto; }
.ar-hero { position: absolute; pointer-events: none; }
.ar-bubble { position: absolute; width: 155px; height: 70px; pointer-events: none; z-index: 5; }
.ar-bubble.ar-flip .cc-s9 { transform: scaleX(-1); }
.ar-bubble .cc-text { white-space: normal; width: 149px; line-height: 1.1; }

/* popups */
.ar-headbox { position: absolute; pointer-events: none; }
.ar-head { position: absolute; left: 0; top: 0; width: 102px; height: 102px; transform-origin: 0 0; }
.ar-head > img { position: absolute; }
.ar-head > .bg { left: 0; top: 4px; width: 102px; height: 102px; }
.ar-head > .pic { left: 6px; top: 8px; width: 90px; height: 90px; }
.ar-hicon { position: absolute; pointer-events: none; }
.ar-hicon > .lu-icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.72); }
.ar-ricon, .ar-ticon { position: absolute; }
.ar-ricon > .it-icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.85); }
.ar-ticon > .it-icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.9); }
.ar-buytext { position: absolute; text-align: center; font-size: 28px; line-height: 1.35; white-space: normal; }
.ar-buytext span { white-space: normal; }
.ar-richicon { width: 40px; height: 40px; vertical-align: middle; }
.ar-cdtext { position: absolute; font-size: 28px; color: #fff; white-space: nowrap; }
.ar-mscroll { position: absolute; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.ar-minner { position: relative; width: 680px; }
.ar-mrow { position: absolute; }
.ar-mrow.ar-in { animation: arIn .25s ease-out both; }
@keyframes arIn { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.ar-vlist { position: absolute; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; pointer-events: auto; }
.ar-vlist::-webkit-scrollbar, .ar-mscroll::-webkit-scrollbar { display: none; }
.ar-vrow { position: relative; width: 100%; flex: none; }
.ar-vrow .cc-btn { pointer-events: auto; }
.ar-ruledesc { position: absolute; left: 71px; top: 1px; width: 680px; white-space: normal; font-size: 21px; line-height: 1.2; color: rgb(237, 202, 130); }
.ar-claimbar { border-image: url('/assets/ui/arena/bg_task_kelingqu_bar.png') 20 108 24 100 fill / 20px 108px 24px 100px stretch !important; }
[data-task], [data-rank] { cursor: pointer; }

/* a luta */
.ab-ui { position: absolute; inset: 0; }
.ab-ui.ab-paused::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .35); pointer-events: none; }
.ab-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.ab-over { position: absolute; inset: 0; z-index: 4; }
.ab-over:empty { pointer-events: none; }
.ab-plain { position: absolute; right: 24px; bottom: 18px; font-size: 17px; color: rgb(0, 255, 246); }
.ab-longpic { object-fit: cover; object-position: 50% 0; }
.ab-wltext { position: absolute; font-size: 29px; color: rgb(237, 202, 130); white-space: nowrap; transform: translateY(50%); pointer-events: none; }
.ab-wlteam { position: absolute; display: flex; align-items: center; gap: 0; height: 80px; width: 540px; pointer-events: none; padding-left: 10px; box-sizing: border-box; }
.ab-flag { width: 25px; height: auto; transform: scale(.8); margin-right: 0; }
.ab-wlhero { position: relative; width: 55px; height: 55px; flex: none; }
.ab-wlhero .lu-icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.5); }
.ab-stamp { position: absolute; font-size: 35px; color: #fff; transform: translate(-50%, 50%) rotate(-15deg); text-shadow: 0 0 3px #000; pointer-events: none; }
.ab-vs .cc-text { white-space: nowrap; }

/* prêmios de melhor colocação (NodePrizeView) */
.ar-npcell { position: absolute; cursor: pointer; }
.ar-npcell .ar-got { background: rgba(0, 0, 0, .61); }
.ar-r7 > .it-icon { transform: translate(-50%, -50%) scale(.7); }
.ar-r9 > .it-icon { transform: translate(-50%, -50%) scale(.9); }
/* o lema (InputView) */
.ar-input { position: absolute; box-sizing: border-box; padding: 0; background: transparent; border: 0; outline: 0; resize: none; color: #fff;
  font: 29px/1.2 'FZCuYuan', Inter, sans-serif; display: flex; align-items: center; overflow: hidden; pointer-events: auto; padding-top: 42px; }
/* o retrato da Arena (TowerSelAvarView) */
.ar-hicon.ar-pick { pointer-events: auto; cursor: pointer; }
.ar-hicon.ar-pick > .lu-icon { transform: translate(-50%, -50%); }
.ar-avatars .ar-vrow { height: 116px; }
.ar-off { display: none !important; }