/* Runekin · css/arena.css — Arena: lobby, sala, montagem de equipe, item, resultado.
   Mesma gramática do palco do EXPLORE (844×390, paisagem): slab de câmara à esquerda com
   .rg-slabtxt/.rg-slabbot, conteúdo à direita (left: 280px), ações na .rg-bottomrow. */
.ar-scene .rg-slabtxt { width: 220px; }
.ar-scene .rg-slabtxt p { max-width: 210px; }
.ar-scene .rg-slabtxt .rg-slabtitle.long { font-size: 34px; }
.ar-field { display: block; margin-top: 12px; }
.ar-field .bs-label { display: block; margin-bottom: 4px; }
.ar-scene input { font: 600 14px var(--mono); letter-spacing: 1px; padding: 7px 10px; border: 3px solid var(--ink); background: #fff; color: var(--ink); width: 100%; box-sizing: border-box; min-width: 0; }
.ar-join { display: flex; gap: 6px; align-items: center; }
.ar-join input { width: 140px; text-transform: uppercase; }
.ar-bottom { left: 280px; }
.ar-bottom p { color: #fff; }
/* lobby: ajustes em linhas de chips */
.ar-settings { position: absolute; left: 280px; right: 26px; top: 26px; display: flex; flex-direction: column; gap: 8px; color: #fff; }
.ar-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ar-row .bs-label { min-width: 110px; color: #fff; }
.ar-settings .bs-btn.xs { --face: #fff; color: var(--ink); }
.ar-settings .bs-btn.xs.on { --face: var(--c2); }
.ar-hint { margin: 0 0 4px 116px; font: 500 11px/1.3 var(--body); color: var(--muted-ink); }
/* sala */
.ar-code { margin-top: 10px; }
.ar-code b { display: block; font: 400 44px/1 var(--display); letter-spacing: 6px; }
.ar-status { margin-top: 10px; display: inline-block; }
.ar-status.online { background: var(--c2); color: var(--ink); }
.ar-status.error { background: var(--curse); color: #fff; }
.ar-players { position: absolute; left: 280px; right: 26px; top: 26px; display: flex; gap: 12px; }
.ar-player { flex: 1; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.ar-player b { font: 400 30px/1 var(--display); text-transform: uppercase; }
.ar-player small { font: 500 11px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.ar-player.empty { opacity: .6; }
.ar-scene p.ar-center { position: absolute; left: 280px; right: 26px; top: 140px; margin: 0; color: #fff; font: 400 20px var(--display); letter-spacing: 2px; text-transform: uppercase; }
.ar-scene p.ar-center.ar-big { top: 60px; font-size: 34px; }
/* montagem: vagas em cima, espécies embaixo (fileira rolável como a escolha do EXPLORE) */
.ar-slots { position: absolute; left: 280px; right: 26px; top: 22px; display: flex; gap: 8px; }
.ar-slot { width: 96px; padding: 6px 4px 8px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
.ar-slot.empty { justify-content: center; min-height: 118px; opacity: .55; cursor: default; }
.ar-slot.empty b { font: 400 28px/1 var(--display); }
.ar-slot.empty small { font: 500 10px var(--mono); letter-spacing: 1px; text-transform: uppercase; }
.ar-slot .rg-unit-art { width: 52px; height: 52px; display: grid; place-items: center; }
.ar-slot .rg-unit-art img, .ar-slot .rg-unit-art svg { width: 100%; height: 100%; object-fit: contain; }
.ar-slot .rg-unit-name { font-size: 14px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 88px; }
.ar-lvl { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.ar-lvl b { font: 500 11px var(--mono); min-width: 40px; }
.ar-lvl .bs-btn.xs { min-height: 22px; width: 22px; padding: 0; font-size: 14px; }
.ar-scene .ar-species { position: absolute; left: 280px; right: 26px; top: 154px; bottom: 74px; display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; padding: 6px 6px 6px 0; scrollbar-width: none; }
.ar-scene .ar-species::-webkit-scrollbar { display: none; }
.ar-species .rg-pick { width: 112px; padding: 8px; }
.ar-species .rg-pick .rg-unit-art { width: 70px; height: 70px; }
.ar-species .rg-pick .rg-unit-name { font-size: 17px; }
.ar-scene .ar-species p.ar-center { position: static; font: 500 12px var(--body); text-transform: none; letter-spacing: 0; color: var(--muted-ink); align-self: center; }
.ar-opp { margin-top: 2px; font: 500 12px var(--body); }
.ar-opp b { font: 400 16px var(--display); text-transform: uppercase; letter-spacing: 1px; }
/* item 1 de 3 */
.ar-items { position: absolute; left: 280px; right: 26px; top: 26px; bottom: 74px; display: flex; gap: 12px; }
.ar-item { flex: 1; padding: 16px 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; text-align: left; cursor: pointer; }
.ar-item .ico svg { width: 32px; height: 32px; }
.ar-item b { font: 400 24px/1 var(--display); text-transform: uppercase; }
.ar-item small { font: 500 11px/1.35 var(--body); color: var(--muted); }
.ar-item.sel { --face: var(--c2); }