/* ---- ARENA 2x2 (Liga): the windows of js/arena_ui.js, js/player_menu.js. Warspear's layouts in OUR painted pieces: the chat's wood-and-gold frame and banner (assets/ui/chat_*.png),
   the HUD's blue glossy button and dark plate (hud_btn / hud_plate), the painted class tiles, and the gpt-image sprites of this feature (assets/ui/arena_icons.png 14 cells,
   arena_btns.png 2 cells, act_icons.png 12 cells (9 + the 3 of the social build: art/social/slice_social.py), arena_ticket.png). The class prefix of everything is ar-; the ids start with w-arena / arena- / ar- . No rank insignia, ever: only points.
   SIZE (the user: "the arena modal and these things are too big, make them smaller"): every window, the HUD chip and the banners are about 30 percent smaller than the first version (widths x 0.75, paddings
   and heights x 0.72-0.75, fonts x 0.8 and never under 9.5px, painted icons x 0.72-0.75); the Arena window is 330 px wide (it was 440). The art is cut for the big sizes (border-image slices), only
   the drawn widths changed. */

/* painted icons: arena_icons.png = 14 cells in a row (0 2x2 swords, 1 3x3, 2 points coin, 3 trophy, 4 sword, 5 / 6 / 7 gold / silver / bronze medal, 8 rank chip, 9 hourglass, 10 ticket, 11 season medal, 12 league wreath, 13 help) */
.ar-ic { display: inline-block; flex: none; width: var(--s, 24px); height: var(--s, 24px); background: url(../assets/ui/arena_icons.png) no-repeat; background-size: calc(var(--s, 24px) * 14) var(--s, 24px); background-position: calc(var(--i) * var(--s, 24px) * -1) 0; vertical-align: middle; }
/* act_icons.png = 12 cells: the first 9 are the order of the 3x3 actions grid, 9 Remover amigo, 10 Ações da guilda, 11 Excluir do grupo (the variants of js/social_core.js actionRules); ?v=2 = the 12-cell sheet */
.act { display: inline-block; flex: none; width: var(--s, 52px); height: var(--s, 52px); background: url(../assets/ui/act_icons.png?v=2) no-repeat; background-size: calc(var(--s, 52px) * 12) var(--s, 52px); background-position: calc(var(--i) * var(--s, 52px) * -1) 0; }
.mgrid .mi.act { --s: 52px; }

/* the window: the chat's painted frame, a banner across the top edge; the body scrolls when the screen is short, the buttons stay */
.ar-win { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 330px; max-width: 96vw; min-width: 0; max-height: 94vh; padding: 28px 22px 20px; border: none; border-radius: 6px; overflow: visible; z-index: 22;
  background: linear-gradient(180deg, #172a56, #0d1836 62%, #0a1330); box-shadow: 0 8px 30px rgba(0, 0, 0, .75); }
.win.ar-win.open { display: flex; flex-direction: column; }
.ar-win::before { content: ''; position: absolute; inset: 0; border: 24px solid transparent; border-image: url(../assets/ui/chat_frame.png) 74 / 24px stretch; pointer-events: none; z-index: 3; }
.ar-head { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); z-index: 4; box-sizing: border-box; min-width: 195px; height: 36px; padding: 0 4px; text-align: center; white-space: nowrap;
  font: bold 15px/34px Verdana; color: #ffe9a6; text-shadow: 0 2px 0 #000, 0 0 3px #000; border: solid transparent; border-width: 0 34px; border-image: url(../assets/ui/chat_banner.png) 0 80 fill / 0 34px / 0 stretch; pointer-events: none; }
.ar-body { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 1px 2px 0; }
.ar-body::-webkit-scrollbar { width: 6px; }

/* the buttons: the HUD's blue glossy plate (hud_btn.png, 9-slice) like the chat's FECHAR / MENU */
.ar-bar { flex: none; position: relative; display: flex; justify-content: space-between; gap: 6px; padding: 6px 0 0; }
.ar-bar.one { justify-content: center; }
.ar-btn { box-sizing: border-box; min-width: 112px; height: 35px; padding: 0 4px 2px; font: bold 11.5px Verdana; color: #fff; text-shadow: 0 1px 0 #000, 0 0 2px #000; white-space: nowrap; cursor: pointer; background: none; box-shadow: none; border: solid transparent; border-width: 10px;
  border-image: url(../assets/ui/hud_btn.png) 40 fill / 10px stretch; border-radius: 0; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); }
.ar-btn:hover { filter: brightness(1.2) drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); }
.ar-btn:active { transform: translateY(1px); }
.ar-btn:disabled { filter: grayscale(1) brightness(.6) drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); cursor: default; }
.ar-btn.dis { filter: grayscale(.85) brightness(.78) drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); }

/* a dark plate with gold ends (hud_plate.png, 9-slice): the season line, the points row */
.ar-plate { box-sizing: border-box; height: 24px; padding: 0 3px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 11.5px/22px Verdana; color: #ff9d6a; text-shadow: 0 1px 0 #000, 0 0 2px #000;
  border: solid transparent; border-width: 0 10px; border-image: url(../assets/ui/hud_plate.png) 0 28 fill / 0 10px / 0 stretch; }

/* ---- A. the Arena window: one calm column: the tickets line, the season plate, ONE card (league, mode, ENTRAR, points), the buttons */
#w-arena { width: 330px; }
.ar-main { display: flex; flex-direction: column; gap: 10px; padding: 6px 2px 3px; }
.ar-tkline { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; font: 10.5px Verdana; color: #c3d0ee; text-shadow: 0 1px 0 #000; }
.ar-free { display: flex; align-items: baseline; gap: 4px; min-width: 0; white-space: nowrap; }
.ar-free b { font: bold 12px Verdana; color: #ffe9a6; } .ar-free b.zero { color: #ff9d6a; }
.ar-free small { margin-left: 3px; font: 9.5px Verdana; color: #8ea3cc; }
.ar-own { display: inline-flex; align-items: center; gap: 4px; flex: none; height: 21px; padding: 0 8px 0 4px; background: rgba(0, 0, 0, .32); border: 1px solid #5b4416; border-radius: 11px; font: bold 11.5px Verdana; color: #ffe9a6; cursor: help; }
/* the season: a quiet plate; its tooltip carries the rules (hover, or a click for a touch screen) */
.ar-seasonrow { position: relative; }
.ar-seasonrow .ar-plate { height: 21px; font: 10px/19px Verdana; color: #e2b48c; cursor: help; }
#ar-helptxt { display: none; position: absolute; left: 8px; right: 8px; top: calc(100% + 3px); z-index: 6; padding: 6px 9px; font: 10px/14px Verdana; color: #e6ecff; text-align: center; background: #0b1530; border: 2px solid #c99a2e; border-radius: 4px; box-shadow: 0 5px 14px rgba(0, 0, 0, .7); text-shadow: 0 1px 0 #000; pointer-events: none; }
.ar-seasonrow:hover #ar-helptxt, #ar-helptxt.on { display: block; }
/* the ONE card: the league as its header, the mode with ENTRAR, the points line as its footer */
.ar-lgcard { overflow: hidden; background: linear-gradient(180deg, #112146, #0a1431); border: 2px solid #4a3716; border-radius: 3px; box-shadow: inset 0 0 9px rgba(0, 0, 0, .6); }
.ar-lgh { height: 25px; line-height: 25px; text-align: center; font: bold 12px Verdana; letter-spacing: .2px; color: #ffe9a6; text-shadow: 0 1px 0 #000, 0 0 2px #000; background: linear-gradient(180deg, rgba(201, 154, 46, .22), rgba(201, 154, 46, .06)); border-bottom: 1px solid rgba(201, 154, 46, .35); }
.ar-mrow { display: flex; align-items: center; gap: 12px; padding: 13px 15px 12px 13px; }
.ar-mic { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .7)); }
.ar-mtxt { flex: 1; min-width: 0; }
.ar-mname { font: bold 15px Verdana; color: #ffe14a; text-shadow: 0 1px 0 #000, 0 0 2px #000; white-space: nowrap; }
#ar-queue { margin-top: 5px; font: 10.5px Verdana; color: #cfdcff; text-shadow: 0 1px 0 #000; }
#ar-queue.on { color: #7dff9a; font-weight: bold; }
#ar-sub { min-height: 13px; margin-top: 4px; font: 10px/13px Verdana; color: #8ea3cc; text-shadow: 0 1px 0 #000; }
#ar-sub.warn { color: #ff9d6a; font: bold 11.5px/13px Verdana; }
#ar-sub.ok { color: #7dff9a; font-weight: bold; }
.ar-ent { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
#ar-enter { width: 58px; height: 58px; padding: 0; border: none; cursor: pointer; background: url(../assets/ui/arena_btns.png) 0 0 / 116px 58px no-repeat; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .65)); }
#ar-enter:hover { filter: brightness(1.15) drop-shadow(0 2px 2px rgba(0, 0, 0, .65)); } #ar-enter:active { transform: translateY(1px); }
#ar-enter.q { background-position: -58px 0; }
#ar-enter.dis { filter: grayscale(1) brightness(.55) drop-shadow(0 2px 2px rgba(0, 0, 0, .65)); cursor: default; }
#ar-entl { font: bold 9.5px Verdana; letter-spacing: .6px; color: #bcd0f5; text-shadow: 0 1px 0 #000; }
.ar-lgcard:has(#ar-enter.dis) #ar-entl { color: #6d7a96; }
.ar-stats { display: flex; align-items: center; justify-content: center; gap: 13px; height: 30px; border-top: 1px solid rgba(255, 255, 255, .09); background: rgba(0, 0, 0, .2); font: 11.5px Verdana; color: #c3d0ee; text-shadow: 0 1px 0 #000; }
.ar-stats > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ar-stats b { font: bold 13px Verdana; color: #ffe9a6; }
.ar-sep { flex: none; width: 1px; height: 14px; background: rgba(255, 255, 255, .16); }
/* a hero below the minimum level: no queue count, no points line, only the reason */
.ar-lgcard.gate .ar-stats, .ar-lgcard.gate #ar-queue { display: none; }

/* ---- B. Temporada da Arena: the ranking */
#w-arena-rank { width: 345px; }
.ar-rbody { display: flex; flex-direction: column; gap: 7px; padding-top: 4px; }
.ar-rbody > .ar-plate { height: 21px; font: 10px/19px Verdana; color: #e2b48c; }
.ar-lgsel { display: flex; align-items: center; gap: 6px; height: 33px; flex: none; }
.ar-lgsel .iarrow { width: 29px; height: 26px; flex: none; } .ar-lgsel .iarrow.flip { transform: scaleX(-1); }
.ar-lgsel .iarrow:hover:not(:disabled) { filter: brightness(1.25); }
.ar-lgsel .iarrow:disabled { filter: grayscale(1) brightness(.5); cursor: default; opacity: .7; }
#ar-lgname, .ar-catname { flex: 1; height: 29px; display: flex; align-items: center; justify-content: center; gap: 7px; text-shadow: 0 1px 0 #000; border: solid transparent; border-width: 0 10px; border-image: url(../assets/ui/hud_plate.png) 0 28 fill / 0 10px / 0 stretch; }
#ar-lgn { font: bold 12px Verdana; color: #fff; white-space: nowrap; }
#ar-lgmine { font: 9.5px Verdana; color: #7dff9a; white-space: nowrap; }
#ar-list { flex: none; height: min(170px, 38vh); overflow-y: auto; overflow-x: hidden; background: linear-gradient(180deg, #0d1a38, #091229); border: 2px solid #4a3716; border-radius: 3px; box-shadow: inset 0 0 12px rgba(0, 0, 0, .8), 0 0 0 1px #000; }
#ar-list::-webkit-scrollbar { width: 8px; }
.ar-row { display: grid; grid-template-columns: 29px 28px minmax(0, 1fr) auto 19px; align-items: center; column-gap: 7px; height: 31px; padding: 0 6px 0 4px; cursor: pointer; color: #fff; text-shadow: 0 1px 0 #000; }
#ar-list .ar-row:nth-child(even), #ar-pinned .ar-row:nth-child(even) { background: rgba(255, 255, 255, .045); }
.ar-row:hover { filter: brightness(1.18); }
.ar-row.me { background: linear-gradient(90deg, #1d7a4b, rgba(47, 178, 106, .35)) !important; }
.ar-row.me .ar-nick { color: #7dff9a; }
.ar-rk { position: relative; width: 29px; height: 26px; display: flex; align-items: center; justify-content: center; }
.ar-rk b { position: absolute; left: 0; right: 0; top: 0; bottom: 2px; display: flex; align-items: center; justify-content: center; font: bold 11px Verdana; color: #fff; text-shadow: 0 1px 0 #000, 0 0 3px #000; }
.ar-nick { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: bold 12.5px Verdana; }
.ar-pts { font: bold 13px Verdana; text-align: right; }
.ar-row .ar-ic { justify-self: end; }
#ar-pinned { flex: none; display: none; border-top: 2px solid #c99a2e; background: linear-gradient(180deg, #0d1a38, #091229); }
#ar-pinned.on { display: block; }
/* the class symbol with its level (the HUD's tile frame and badge) */
.ar-tile { position: relative; display: block; flex: none; width: 26px; height: 26px; border-radius: 3px; background: url(../assets/ui/cls_ranger_tile.png) center / cover no-repeat; box-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.ar-tile::after { content: ''; position: absolute; inset: -2px; background: url(../assets/ui/hud_tileframe.png) center / 100% 100% no-repeat; pointer-events: none; }
.ar-tile b { position: absolute; right: -6px; bottom: -6px; z-index: 2; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; font: bold 9px Verdana; color: #fff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; background: url(../assets/ui/hud_badge.png) center / 100% 100% no-repeat, radial-gradient(circle, #1a2750 0 55%, transparent 57%); }
#ar-rpop { position: absolute; left: 50%; bottom: calc(100% + 5px); transform: translateX(-50%); display: none; padding: 3px; background: rgba(36, 25, 16, .97); border: 2px solid #8a6a2a; border-radius: 3px; box-shadow: 0 5px 12px rgba(0, 0, 0, .6); z-index: 5; }
#ar-rpop.open { display: block; }
#ar-rpop button { display: block; width: 100%; white-space: nowrap; padding: 6px 12px; font: 11.5px Verdana; color: #fff; text-shadow: 0 1px 0 #000; background: none; border: none; text-align: left; cursor: pointer; }
#ar-rpop button:hover { background: rgba(255, 255, 255, .1); }
#ar-rpop button:disabled { color: #7d8aa6; cursor: default; background: none; }
#ar-plist { display: flex; flex-direction: column; gap: 3px; min-height: 90px; }
#ar-plist .ar-prow { padding: 5px 8px 6px; color: #fff; background: rgba(255, 255, 255, .05); border-radius: 3px; text-shadow: 0 1px 0 #000; }
#ar-plist .ar-ph { display: flex; align-items: center; gap: 4px; font: 12px Verdana; } #ar-plist .ar-ph b { flex: 1; color: #ffe14a; } #ar-plist .ar-ph i.v { font-style: normal; font-weight: bold; font-size: 13.5px; }
#ar-plist .ar-pd { margin-top: 2px; font: 10px Verdana; color: #cfdcff; }
#ar-plist:empty::before { content: 'Nenhuma temporada anterior ainda.'; display: block; padding-top: 30px; text-align: center; font: italic 11.5px Verdana; color: #6d80a8; }

/* ---- C. the player card (a modal over the ranking): the navy panel with the gold edge of the reference */
.ar-card { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 285px; max-width: 96vw; min-width: 0; padding: 9px 11px 9px; overflow: visible; border: 3px solid #c99a2e; border-radius: 4px; background: linear-gradient(180deg, #10204a, #0b1530);
  box-shadow: inset 0 0 0 1px #6b4d10, 0 10px 30px rgba(0, 0, 0, .8); }
.ar-chead { display: flex; align-items: center; gap: 10px; min-height: 32px; margin-bottom: 6px; padding: 0 2px 0 0; }
.ar-chead .ar-tile { width: 30px; height: 30px; margin-left: 2px; }
.ar-chead .ar-tile b { width: 17px; height: 17px; font-size: 9px; }
#ar-cname, #pact-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: bold 14px Verdana; color: #ffe14a; text-shadow: 0 1px 0 #000, 0 0 2px #000; }
#ar-crows { padding: 0 2px; }
.ar-crow { display: flex; align-items: center; gap: 4px; height: 21px; font: 12px Verdana; color: #fff; text-shadow: 0 1px 0 #000; }
.ar-crow > span { flex: 1; white-space: nowrap; }
.ar-crow b { min-width: 30px; text-align: right; font: 13px Verdana; color: #9cc7ff; }
.ar-crow.big { height: 26px; margin-bottom: 6px; } .ar-crow.big b { color: #fff; font-size: 14px; }
.ar-crow.gap { margin-top: 7px; }
.ar-card .ar-bar { padding-top: 9px; }
.ar-card .ar-btn { min-width: 105px; }

/* ---- D. the 3x3 actions grid (js/player_menu.js; the same look as the bag's MENU grid, so it is also the future Interagir menu) */
.ar-pact { width: auto; }
.ar-pact .mgrid { margin: 0 auto; }
.ar-pact .mgrid button:disabled { filter: grayscale(.6) brightness(.5); cursor: default; }
.ar-pact .mgrid button:disabled:hover { filter: grayscale(.6) brightness(.5); }
.ar-pact .ar-bar { padding-top: 8px; }

/* ---- F. the result of the match: "Resultados da batalha", Warspear's table adapted to 2x2: a slim line over the table ("Vencedores: ..." after an elimination, "Empate" or "Vantagem: ..." when the time ran out),
   the painted arrows with the category in the middle, the four players (class symbol + level, nickname white for the hero's team / red for the enemy team, the value in yellow on the right), FECHAR at the bottom left.
   The winners are marked quietly: a small laurel on their rows and in the line under the title; white / red are TEAM colours, not win / loss. */
.ar-pop { width: 285px; }
.win.ar-pop.open { display: flex; }
#w-arena-result { width: 315px; }
.ar-resbody { display: flex; flex-direction: column; gap: 7px; padding-top: 4px; }
.ar-winline { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 19px; font: bold 10.5px Verdana; color: #ffe9a6; text-shadow: 0 1px 0 #000, 0 0 2px #000; white-space: nowrap; }
.ar-winline span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ar-winline .ar-ic { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .7)); }
.ar-winline.none { visibility: hidden; }
#ar-rcat { font: bold 12px Verdana; color: #ffe14a; white-space: nowrap; }
#ar-rtable { flex: none; background: linear-gradient(180deg, #0d1a38, #091229); border: 2px solid #4a3716; border-radius: 3px; box-shadow: inset 0 0 12px rgba(0, 0, 0, .8), 0 0 0 1px #000; }
.ar-trow { display: grid; grid-template-columns: 19px 28px minmax(0, 1fr) auto; align-items: center; column-gap: 7px; height: 35px; padding: 0 10px 0 7px; color: #fff; text-shadow: 0 1px 0 #000; }
.ar-trow:nth-child(even) { background: rgba(255, 255, 255, .045); }
.ar-trow.me { background: rgba(255, 255, 255, .075); }
.ar-wl { width: 19px; height: 19px; display: flex; align-items: center; justify-content: center; }
.ar-wl .ar-ic { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .7)); }
.ar-tnick { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 12.5px Verdana; color: #fff; }
.ar-tnick.foe { color: #ff6f69; }
.ar-tval { font: bold 13.5px Verdana; color: #ffe14a; text-align: right; text-shadow: 0 1px 0 #000, 0 0 2px #000; }
/* a row of the result table opens that fighter's card (js/arena_ui.js openFighter), like a row of the ranking: the hand cursor and a light highlight */
.ar-trow { cursor: pointer; }
.ar-trow:hover { background: rgba(255, 255, 255, .13); filter: brightness(1.15); }
/* the card and its actions grid open ABOVE the result table (all three are `.win.modal`, z-index 24 in style.css, and the table comes later in the markup, so it would cover them): table 24 < card 25 < grid 26 */
#w-arena-card { z-index: 25; }
#w-pact { z-index: 26; }

/* what is behind a pop-up is shaded (the invisible #mblock layer of style.css takes the click) */
body:has(.ar-card.open, .ar-pop.open) #mblock { background: rgba(2, 6, 18, .42); }

/* ---- the HUD: the chip under the minimap's place (152 x 30 px, centred under the 192 px frame; the queue, the hold, the result and a dev visit only: the match clock is the plate #arena-clock below), the announcement banner (countdown, BATALHA!, the end, the dead hero: never the clock, it covered the name plates at the top of the screen). No "Partida encontrada!" notice any more: the match is entered by itself.
   The plate art (hud_plate.png, 653 x 48, slice 28) keeps its proportions at any height h with a border of 28 x h / 48: 17 px at 30 px, 13 px at the HUD's 23 px plates (.uname, #mmname) */
#arena-chip { position: fixed; right: 28px; top: 243px; width: 152px; height: 30px; z-index: 5; display: none; align-items: center; gap: 4px; box-sizing: border-box; padding: 0 0 2px; cursor: pointer; color: #fff; text-shadow: 0 1px 0 #000, 0 0 2px #000;
  border: solid transparent; border-width: 0 17px; border-image: url(../assets/ui/hud_plate.png) 0 28 fill / 0 17px / 0 stretch; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .55)); }
#arena-chip.on { display: flex; }
#arena-chip:hover { filter: brightness(1.15) drop-shadow(0 2px 2px rgba(0, 0, 0, .55)); }
#arena-chip .ar-ic { margin-left: -3px; }
#arena-chip .ac-t { flex: 1; min-width: 0; line-height: 11px; }
#arena-chip .ac-t b { display: block; font: bold 10px Verdana; color: #ffe9a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#arena-chip .ac-t span { display: block; font: 9.5px Verdana; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ac-x { display: none; flex: none; width: 20px; height: 20px; padding: 0; border: none; cursor: pointer; background: url(../assets/ui/arena_btns.png) -20px 0 / 40px 20px no-repeat; }
#arena-chip.q #ac-x { display: block; }
#ac-x:hover { filter: brightness(1.25); }
#arena-banner { position: fixed; left: 50%; top: 8%; transform: translateX(-50%); z-index: 30; display: none; text-align: center; white-space: nowrap; pointer-events: none; }
#arena-banner.on { display: block; }
#arena-banner b { display: block; font: bold 26px Georgia, serif; color: #ffe14a; letter-spacing: .7px; text-shadow: 0 2px 0 #3b2a0a, -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 2px 0 #000, 0 0 10px rgba(0, 0, 0, .9); }
#arena-banner.small b { font-size: 17px; }
#arena-banner span { display: block; margin-top: 3px; font: bold 10px Verdana; color: #fff; text-shadow: 0 1px 0 #000, 0 0 6px rgba(0, 0, 0, .9); }
body:has(#w-chat.open) #arena-banner { display: none; }
/* the dead hero's state (PVP_SPEC 8.4 / 8.4b): the banner shows 'Você foi derrotado' and the Desistir button (the arena windows' own painted .ar-btn; the banner itself stays click-through) */
#arena-banner.dead b { font: bold 22px Georgia, serif; color: #ff9a8a; }
#ab-concede { display: none; }
#arena-banner.dead #ab-concede { display: inline-block; pointer-events: auto; margin-top: 6px; }
/* the notices (#toasts, top 60 px) wait UNDER the banner while it is up: the result line of the match ('Arena: +60 pontos.') used to print over 'Batalha encerrada / Você volta para onde estava.', and the hold note over the countdown.
   The banner is 33 - 35 px tall (81 px with the Desistir button), at top 8 percent */
body:has(#arena-banner.on) #toasts { top: calc(8% + 44px); }
body:has(#arena-banner.on.dead) #toasts { top: calc(8% + 92px); }

/* ---- the match clock plate (PVP_SPEC 8.2): under the minimap's place, the same two constructs as the hero's frame (a label plate like .uname / #mmname, 13 px borders at 23 px: 28 x 23 / 48, over a number box
   with the .pbars recipe and a 10 px barframe), built from the existing painted pieces only (hud_plate, hud_barframe, hud_badge, the hourglass cell 9 of arena_icons). Hidden until js/arena_ui.js renderClock gives it .on */
#arena-clock { position: fixed; right: 28px; top: 243px; width: 152px; z-index: 5; display: none; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .55)); }
#arena-clock.on { display: block; }
.acl-lab { box-sizing: border-box; height: 23px; padding: 0 4px; text-align: center; font: bold 11px/21px Verdana; color: #ffe9a6; text-shadow: 0 1px 0 #000, 0 0 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border: solid transparent; border-width: 0 13px; border-image: url(../assets/ui/hud_plate.png) 0 28 fill / 0 13px / 0 stretch; }
.acl-box { box-sizing: border-box; position: relative; height: 44px; margin-top: 1px; padding: 4px 9px; background: #04060c; border-radius: 3px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.acl-box::after { content: ''; position: absolute; inset: -1px; border: 10px solid transparent; border-image: url(../assets/ui/hud_barframe.png) 26 / 10px stretch; pointer-events: none; }
#acl-time { flex: none; min-width: 64px; text-align: center; font: bold 19px/22px Verdana; color: #ffe9a6; text-shadow: 0 1px 0 #000, 0 0 3px #000; }
.acl-pips { flex: none; display: grid; grid-template-columns: 12px 12px; grid-auto-rows: 12px; gap: 2px; }
.acl-pips i { --c: #6dff8a; display: block; width: 12px; height: 12px; background: url(../assets/ui/hud_badge.png) center / 100% 100% no-repeat, radial-gradient(circle, var(--c) 0 55%, transparent 57%); }
.acl-pips i:nth-child(n+3) { --c: #ff5a4a; }
.acl-pips i.dead { --c: #2a2f36; filter: grayscale(1); }
#arena-clock[data-state=wait] #acl-time { color: #cdbf94; opacity: .8; }
#arena-clock[data-state=warn] #acl-time { color: #ff9d6a; }
#arena-clock[data-state=last] #acl-time { color: #ff5a4a; animation: acbeat 1s ease-in-out infinite; }
#arena-clock[data-state=last] .acl-box { animation: combatframe 1s ease-in-out infinite; }
#arena-clock[data-state=last] .ar-ic { animation: aclwob 1s ease-in-out infinite; }
#arena-clock[data-state=over] #acl-time { color: #9aa4a8; }
#arena-clock[data-state=over] .ar-ic { filter: grayscale(1) brightness(.85); }
@keyframes acbeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes aclwob { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }

/* the 10 s countdown: everybody is frozen (PVP_SPEC 5, 8.7), the hotbar dims so the held state is visible */
body.arena-hold #hotbar .slot { filter: brightness(.6); }

/* ---- the admin panel's Arena tab */
.ar-adm .admnote { align-self: center; margin-left: 8px; font: 11px Verdana; color: #ffd86a; }
.ar-adm .admrow > span { width: 72px; flex: none; }
.ar-adm .admchip { padding: 4px 8px; }
.ar-adm .ar-astat { margin: 6px 0 2px; padding: 6px 8px; font: 11px/15px Verdana; color: #cfe0ff; background: rgba(0, 0, 0, .25); border: 1px solid #34507e; border-radius: 4px; }