:root {
  --ink: #101820; --panel: #17232e; --soft: #243642; --line: #38505d;
  --text: #f5f7f8; --muted: #9db0b9; --gold: #f4bd52; --red: #ef4444; --blue: #3b82f6;
  --green: #38c876;
}
* { box-sizing: border-box }
body { margin: 0; background: #0b1116; color: var(--text); font: 14px Inter, Segoe UI, Arial, sans-serif }
button, input, textarea, select { font: inherit }
code { background: #0b1319; padding: 1px 5px; border-radius: 4px; font-size: 11px }

button {
  border: 1px solid var(--line); border-radius: 8px; background: #20313d; color: #fff;
  padding: 10px 13px; cursor: pointer; font-weight: 700;
}
button:hover { filter: brightness(1.15) }
button:active { transform: translateY(1px) scale(.99) }
button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px }
button:disabled { cursor: wait; opacity: .6 }
button.primary { background: var(--gold); border-color: var(--gold); color: #17212a }
button.danger { background: #3a1b20; border-color: #a83b49; color: #ffd7dc }
button.danger:hover { background: #57232c }
button.mini { font-size: 11px; padding: 6px 9px }
button.quiet { background: transparent; color: var(--muted) }

/* ------------------------------------------------------------------ painel */
/* Barras de rolagem no tema escuro: com o estilo padrão do sistema elas cortam
   o painel com duas faixas cinza-claro e a tela parece sem CSS. */
* { scrollbar-width: thin; scrollbar-color: #3c5360 transparent }
::-webkit-scrollbar { width: 9px; height: 9px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb { background: #3c5360; border-radius: 6px }
::-webkit-scrollbar-thumb:hover { background: #52707f }

.control-shell {
  position: fixed; z-index: 3; left: 22px; top: 22px; bottom: 22px;
  width: min(560px, calc(100vw - 44px)); display: flex; flex-direction: column;
  background: rgba(23, 35, 46, .97); border: 1px solid #3b535e; border-radius: 16px;
  box-shadow: 0 18px 65px #0009; overflow: hidden;
}
.control-shell header { padding: 20px 22px 15px; display: flex; justify-content: space-between; align-items: flex-start }
.eyebrow { color: var(--gold); font-size: 10px; font-weight: 900; letter-spacing: .16em; margin: 0 0 3px }
h1 { font-size: 22px; letter-spacing: .06em; margin: 0 }
h1 span { color: var(--gold) }
.status { font-size: 11px; color: var(--muted); display: flex; gap: 6px; align-items: center }
.status i { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b }
.status.online i { background: var(--green) }

/* As abas quebram em linha em vez de rolar: uma barra horizontal aqui esconde
   metade dos nomes e polui o topo do painel. */
.tabs { display: flex; flex-wrap: wrap; padding: 4px 13px 0; gap: 4px; border-bottom: 1px solid var(--line) }
.tabs button { white-space: nowrap; border: 0; border-radius: 7px 7px 0 0; background: transparent; color: var(--muted); padding: 10px 11px; font-size: 13px }
.tabs button:hover { color: #fff; filter: none }
.tabs button.active { background: var(--soft); color: #fff }
.panes { overflow: auto; flex: 1; padding: 16px }
.pane { display: none }
.pane.active { display: block }

.card { background: #101b23; border: 1px solid #2b414c; border-radius: 12px; padding: 15px; margin-bottom: 12px }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 13px; color: var(--gold) }
label { display: block; color: #d8e1e4; font-weight: 700; font-size: 12px; margin-bottom: 10px }
input[type=text], input[type=search], input[type=number], input[type=password], textarea, select {
  width: 100%; background: #0b1319; border: 1px solid #3c5360; color: #fff; border-radius: 7px; padding: 9px; margin-top: 6px;
}
/* Sliders no tema escuro — o controle padrão do sistema destoa do resto do painel. */
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; margin-top: 12px; height: 6px; border-radius: 4px; background: #0b1319; border: 1px solid #3c5360; cursor: pointer }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 17px; height: 17px; border-radius: 50%; background: var(--gold); border: 2px solid #17212a; cursor: pointer }
input[type=range]::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: var(--gold); border: 2px solid #17212a; cursor: pointer }
input[type=range]::-moz-range-track { height: 6px; border-radius: 4px; background: #0b1319 }
input[type=color] { width: 100%; height: 38px; margin-top: 6px; background: #0b1319; border: 1px solid #3c5360; border-radius: 7px; padding: 2px }
textarea { resize: vertical }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.actions { display: flex; gap: 8px; margin-top: 15px; flex-wrap: wrap }
.actions.tight { margin-top: 8px }
.public-link { margin-top: 12px; padding: 11px; display: grid; gap: 7px; background: #0b151c; border: 1px solid #315261; border-radius: 9px }
.public-link b { color: #7dd3fc; font-size: 12px }
.public-link code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #dff7ff; padding: 7px 8px }
.public-link.pending span { color: var(--muted); font-size: 11px; line-height: 1.4 }
.muted { color: var(--muted); line-height: 1.45 }
.tiny { font-size: 11px }
.toggle { display: flex; align-items: center; gap: 8px; font-size: 13px }
.toggle input { width: auto; margin: 0 }

.grid-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px }
.grid-buttons.tight button { font-size: 11px; padding: 8px }
.team-switch { display: flex; gap: 8px; margin: 10px 0 }
.team-switch button { flex: 1; font-size: 12px }
.team-switch button.active { background: var(--gold); color: #17212a; border-color: var(--gold) }

.mode-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 9px }
.mode-picker button { min-height: 88px; text-align: left; display: flex; flex-direction: column; justify-content: center; gap: 5px; transition: border-color .2s, background .2s, transform .15s }
.mode-picker button b { font-size: 15px; letter-spacing: .04em }
.mode-picker button span { color: var(--muted); font-size: 11px; line-height: 1.35; font-weight: 500 }
.mode-picker button.active { background: #f4bd5218; border-color: var(--gold); box-shadow: inset 3px 0 var(--gold) }
.mode-picker button.active span { color: #dfe7ea }

.simulator { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px }
.gift-button { min-height: 68px; font-size: 12px; border-left: 4px solid var(--gift, var(--gold)) }
.gift-button small { display: block; opacity: .7; margin-top: 4px }

.fighter-grid { display: grid; gap: 12px }
.fighter-card { background: #101b23; border: 1px solid #2b414c; border-radius: 12px; padding: 15px }
.fighter-head { display: flex; align-items: center; gap: 9px; margin-bottom: 14px }
.fighter-head h2 { margin: 0; flex: 1 }
.swatch { width: 13px; height: 32px; border-radius: 5px }
.package-picker { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; margin-bottom: 12px; padding: 10px; border: 1px solid #3b535e; border-radius: 9px; background: #13222b }
.package-picker label { margin: 0 }
.package-picker small { max-width: 145px; color: var(--muted); font-size: 10px; line-height: 1.35; padding-bottom: 7px }
.animation-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 11px }
.animation { background: #0b1319; border: 1px solid #2f4550; border-radius: 8px; padding: 9px }
.animation strong { display: block; font-size: 11px; margin-bottom: 6px; text-transform: uppercase }
.animation-actions { display: flex; gap: 6px; margin-top: 7px }
.thumbs { display: flex; gap: 6px; min-height: 44px; align-items: center; flex-wrap: wrap }
.thumb { position: relative; display: inline-flex }
.thumb img { width: 42px; height: 42px; object-fit: contain; background: #17242d; border-radius: 5px; cursor: zoom-in; border: 1px solid #2f4550 }
.thumb img:hover { border-color: var(--gold) }
.remove-animation { position: absolute; top: -6px; right: -6px; padding: 0; width: 18px; height: 18px; line-height: 1; border-radius: 50%; font-size: 12px }

.asset-row { display: flex; gap: 9px; align-items: center }
.asset-row span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.asset-row input { margin-top: 0 }
.asset-list { display: grid; gap: 8px }
.asset-item { display: grid; grid-template-columns: 78px 1fr auto auto; gap: 8px; align-items: center }
.asset-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted) }

.gift-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #24363f; align-items: end }
.gift-row label { font-size: 10px; margin: 0 }
.gift-row button { grid-column: span 4 }
.special-row { border: 1px solid #2f4550; border-radius: 9px; padding: 11px; margin-bottom: 10px }
.gift-live-actions, .comment-attack-head, .engagement-switches { display: flex; gap: 10px; align-items: center; flex-wrap: wrap }
.gift-live-actions .toggle, .comment-attack-head .toggle { margin: 0 }
.comment-attacks { display: grid; gap: 10px; margin: 10px 0 }
.comment-attack { border: 1px solid #2f4550; border-radius: 9px; padding: 11px; background: #0b151b }
.comment-attack-head { justify-content: space-between; margin-bottom: 10px }
.comment-attack-fields { display: grid; grid-template-columns: 1.2fr 1.4fr 1fr .7fr 1fr; gap: 8px; align-items: end }
.comment-attack-fields label { margin: 0 }
.trigger-row { border-bottom: 1px solid #24363f; padding-bottom: 10px; margin-bottom: 10px }
.trigger-row label { margin-bottom: 6px }
.trigger-row.compact { border: 0; margin: 0; padding: 0 }

/* Configuração progressiva: o painel mostra primeiro só o que é usado durante
   uma live. Os ajustes raros continuam disponíveis, sem dominar a tela. */
.advanced { margin-top: 10px; border: 1px solid #293d47; border-radius: 9px; background: #0b151b }
.advanced summary { position: relative; cursor: pointer; list-style: none; padding: 10px 38px 10px 12px; color: #b9c9d0; font-size: 12px; font-weight: 800; user-select: none }
.advanced summary::-webkit-details-marker { display: none }
.advanced summary::after { content: '+'; position: absolute; right: 13px; top: 6px; font-size: 20px; color: var(--gold); transition: transform .18s ease }
.advanced[open] summary::after { transform: rotate(45deg) }
.advanced[open] summary { color: #fff; border-bottom: 1px solid #293d47 }
.advanced-body { padding: 12px }

.ai-test-box { margin: 14px 0; padding: 13px; border: 1px solid #36505d; border-radius: 10px; background: #0b151b }
.ai-test-box h3 { margin: 0 0 5px; font-size: 13px; color: #fff }
.ai-diagnostic { display: grid; gap: 5px; margin-top: 10px; padding: 11px; border-radius: 8px; border: 1px solid #334a55; color: var(--muted); font-size: 12px }
.ai-diagnostic b { color: #fff }
.ai-diagnostic span { line-height: 1.4 }
.ai-diagnostic.loading { border-color: #9b7b37; background: #f4bd520c }
.ai-diagnostic.success { border-color: #277c52; background: #38c8760d }
.ai-diagnostic.error { border-color: #9b3947; background: #ef44440d }
.ai-diagnostic.error b { color: #ffb8c1 }
.ai-diagnostic blockquote { margin: 5px 0; padding: 9px 11px; border-left: 3px solid var(--green); background: #071015; color: #e8f3ed; font-style: italic; line-height: 1.45 }
.ai-diagnostic button { justify-self: start }

.model-file-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid #263b45 }
.model-file-row > div { min-width: 0 }
.model-file-row b, .model-file-row span { display: block }
.model-file-row span { margin-top: 3px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px }
.rvc-status { display: grid; gap: 4px; margin-top: 10px; padding: 10px; border: 1px solid #334a55; border-radius: 8px; color: var(--muted); font-size: 12px }
.rvc-status.success { border-color: #277c52; background: #38c8760d }
.rvc-status.error { border-color: #9b3947; background: #ef44440d }
.rvc-status.loading { border-color: #9b7b37; background: #f4bd520c }
.rvc-status b { color: #fff }
.ranking-preview { margin: 4px 0 13px; padding: 10px 12px; border: 1px dashed #3c5360; border-radius: 8px; overflow: hidden }
.narrator-avatar-config { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 12px; align-items: center; margin: 12px 0; padding: 10px; border: 1px solid #2a414b; border-radius: 10px; background: #0d181f }
.narrator-avatar-config img, .avatar-placeholder { width: 86px; height: 86px; object-fit: contain; border-radius: 8px; background: #071015 }
.avatar-placeholder { display: grid; place-items: center; color: var(--muted); font-size: 11px; text-align: center }

.gift-simple { margin-bottom: 10px; padding: 12px; border: 1px solid #2a414b; border-left: 4px solid var(--gift); border-radius: 10px; background: #0d181f }
.gift-simple-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px }
.gift-simple-head strong { font-size: 14px; color: var(--gift) }
.gift-simple-fields { display: grid; grid-template-columns: 1.1fr 1.1fr .6fr 1fr; gap: 8px; align-items: end }
.gift-simple-fields label { margin: 0 }

.tiktok-status { display: flex; align-items: center; gap: 9px; padding: 11px; margin-bottom: 12px; background: #0b151b; border: 1px solid #334a55; border-radius: 9px }
.tiktok-status .dot { flex: 0 0 auto; margin: 0 }
.tiktok-status div { display: grid; gap: 3px }
.tiktok-status b { font-size: 13px }
.tiktok-status span { color: var(--muted); font-size: 11px }
.tiktok-status.connected { border-color: #277c52; background: #38c8760d }
.tiktok-status.reconnecting, .tiktok-status.connecting { border-color: #9b7b37; background: #f4bd520c }
.tiktok-status.error { border-color: #9b3947 }
.connector-error { margin: -4px 0 12px; padding: 9px 11px; border-radius: 7px; background: #3a1f22; color: #ffdada; font-size: 11px; line-height: 1.4 }
.username-row { display: flex; align-items: center; overflow: hidden; margin-top: 6px; background: #0b1319; border: 1px solid #3c5360; border-radius: 7px }
.username-row > span { padding-left: 10px; color: var(--gold); font-weight: 900 }
.username-row input[type=text] { border: 0; margin: 0; padding-left: 4px }

.gift-picker-modal { position: fixed; inset: 0; z-index: 20; display: none; align-items: center; justify-content: center; padding: 22px; background: #05090cd9; backdrop-filter: blur(5px) }
.gift-picker-modal.show { display: flex }
.gift-picker-modal > section { width: min(620px, 100%); max-height: min(760px, calc(100vh - 44px)); display: flex; flex-direction: column; padding: 18px; background: #101b23; border: 1px solid #47616d; border-radius: 15px; box-shadow: 0 22px 80px #000b }
.gift-picker-modal header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px }
.gift-picker-modal header h2 { margin: 0; font-size: 17px; text-transform: none; letter-spacing: 0; color: #fff }
.gift-picker-modal header button { font-size: 22px; line-height: 1; padding: 4px 9px }
#giftPickerResults { min-height: 100px; overflow: auto; padding-right: 3px }
.gift-picker-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px }
.gift-picker-list button { min-height: 48px; padding: 8px; text-align: left; font-size: 11px; overflow-wrap: anywhere }
.gift-picker-list button:hover { border-color: var(--gold); background: #2b3c45 }

@media (max-width: 480px) {
  .gift-simple-fields { grid-template-columns: 1fr 1fr }
  .gift-picker-list { grid-template-columns: 1fr 1fr }
}

.library-list { display: grid; gap: 8px }
.library-item { display: flex; align-items: center; gap: 9px; background: #0b1319; border: 1px solid #2f4550; border-radius: 8px; padding: 8px 10px }
.library-item b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.library-actions { display: flex; gap: 6px }
.lib-thumb { width: 40px; height: 26px; object-fit: cover; border-radius: 4px }

.event-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; max-height: 220px; overflow: auto }
.event-list li { font-size: 12px; color: #cfdbe1; background: #0b1319; border-radius: 6px; padding: 6px 9px }
.event-list li.rejected { opacity: .55 }
.event-list i { color: var(--muted); font-size: 11px }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #f59e0b; margin-right: 6px }
.dot.on { background: var(--green) }
pre.code { background: #070d11; border: 1px solid #2f4550; border-radius: 8px; padding: 11px; font-size: 11px; overflow: auto; color: #b9ccd5 }

.control-shell footer { border-top: 1px solid var(--line); padding: 12px 16px; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; color: var(--muted); font-size: 10px }
.import { border: 1px solid var(--line); padding: 9px 12px; border-radius: 8px; cursor: pointer; margin: 0; font-size: 12px }

.toast {
  position: absolute; left: 16px; right: 16px; bottom: 62px; padding: 11px 14px; border-radius: 9px;
  background: #1f3a2c; border: 1px solid var(--green); color: #d9ffe9; font-size: 12px; font-weight: 700;
  opacity: 0; transform: translateY(8px); transition: .2s; pointer-events: none;
}
.toast.show { opacity: 1; transform: none }
.toast.error { background: #3a1f22; border-color: var(--red); color: #ffdada }

.sprite-modal { position: fixed; inset: 0; z-index: 9; background: #060b0ee6; display: none; align-items: center; justify-content: center; cursor: zoom-out }
.sprite-modal.show { display: flex }
.sprite-modal figure { margin: 0; text-align: center; max-width: 70vw }
.sprite-modal img { max-width: 60vw; max-height: 70vh; object-fit: contain; filter: drop-shadow(0 12px 40px #000) }
.sprite-modal figcaption { margin-top: 14px; font-weight: 800; color: var(--gold) }
.sprite-modal small { color: var(--muted); font-weight: 400 }

/* ------------------------------------------------------------------- arena */
.arena-shell {
  min-height: 100vh; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: #05090c;
  --avail: 100vw;
}
/* Com o painel aberto, a prévia da arena usa só o espaço que sobra à direita —
   antes o painel flutuante cobria um pedaço dela. No modo OBS não há painel. */
body:not(.arena-only) .arena-shell { --avail: calc(100vw - 620px); padding-left: 604px }

/* O palco tem sempre a proporção 1920x1080 do canvas. Assim a arena inteira
   aparece na tela (nada de corte) e o HUD acompanha o desenho em qualquer
   tamanho de janela — inclusive na fonte de navegador do OBS.
   `--u` vale 1% da largura do palco: todo texto do HUD escala junto. */
.arena-stage {
  position: relative;
  overflow: hidden;
  width: min(var(--avail), calc(100vh * 1.7778));
  height: min(100vh, calc(var(--avail) * 0.5625));
  --u: calc(min(var(--avail), 100vh * 1.7778) / 100);
  background: radial-gradient(circle at 50% 35%, #274653, #0a1218 70%);
}
#arenaCanvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0 }
.arena-hud, .donor, .narration, .special, .winner { position: absolute; z-index: 1 }
.victory-counter {
  position: absolute; z-index: 3; left: 4%; top: 4%; transform: translateX(-50%);
  display: inline-flex; align-items: baseline; gap: calc(var(--u) * .28); min-width: max-content;
  padding: var(--victory-padding, calc(var(--u) * .35)); border-radius: calc(var(--u) * .3);
  background: var(--victory-bg, transparent); color: #cbd7dc; line-height: 1; pointer-events: none;
  user-select: none; touch-action: none; text-shadow: 0 calc(var(--u) * .08) var(--victory-shadow-blur, 0) var(--victory-shadow, transparent);
}
.victory-counter[hidden] { display: none }
.victory-counter-b { left: 96%; justify-content: flex-end }
.victory-counter b { color: var(--victory-accent, var(--gold)); font-size: 1.48em; -webkit-text-stroke: var(--victory-outline-width, 0) var(--victory-outline, #000); paint-order: stroke fill }
.victory-counter span { font-size: .8em; font-weight: inherit; -webkit-text-stroke: var(--victory-outline-width, 0) var(--victory-outline, #000); paint-order: stroke fill }
.arena-stage.editing-victory-counters .victory-counter { pointer-events: auto; cursor: grab; outline: max(2px, calc(var(--u) * .16)) dashed #f4bd52; outline-offset: calc(var(--u) * .35); box-shadow: 0 0 0 calc(var(--u) * .2) #f4bd5233, 0 8px 24px #0008 }
.arena-stage.editing-victory-counters .victory-counter.dragging { cursor: grabbing; outline-style: solid; transform: translateX(-50%) scale(1.05) }
.team-info {
  position: absolute; z-index: 3; left: 14%; top: 5%; transform: translate(-50%, 0);
  width: 28%; max-width: 38%; display: flex; flex-direction: column; align-items: flex-start;
  color: #fff; text-align: left; pointer-events: none; user-select: none; touch-action: none;
}
.team-info-b { left: 86%; align-items: flex-end; text-align: right }
.team-name {
  max-width: 100%; margin: 0; color: #fff; font-size: calc(var(--u) * 2.2); line-height: 1;
  text-transform: uppercase; letter-spacing: .04em; text-align: center; white-space: nowrap;
  text-shadow: 0 2px 6px #000;
}
.arena-stage.editing-team-names .team-info {
  pointer-events: auto; cursor: grab; outline: max(2px, calc(var(--u) * .16)) dashed #f4bd52;
  outline-offset: calc(var(--u) * .45); border-radius: calc(var(--u) * .35);
  background: #071015b8; padding: calc(var(--u) * .3) calc(var(--u) * .55);
  box-shadow: 0 0 0 calc(var(--u) * .24) #f4bd5233, 0 10px 28px #0008;
}
.arena-stage.editing-team-names .team-info:hover { filter: brightness(1.2) }
.arena-stage.editing-team-names .team-info.dragging { cursor: grabbing; outline-style: solid; transform: translate(-50%, 0) scale(1.04) }
.ring-boundary {
  display: none; position: absolute; z-index: 4; top: 76%; transform: translate(-50%, -50%);
  width: auto; min-width: 0; padding: calc(var(--u) * .55) calc(var(--u) * .8); border-radius: 999px;
  border: max(2px, calc(var(--u) * .14)) solid #f4bd52; background: #071015e8; color: #f8d477;
  font-size: calc(var(--u) * 1); font-weight: 1000; letter-spacing: .08em; box-shadow: 0 8px 24px #000a;
  cursor: ew-resize; user-select: none; touch-action: none;
}
.ring-boundary-left { left: 14% }
.ring-boundary-right { left: 86% }
.arena-stage.editing-arena-bounds .ring-boundary { display: block }
.arena-stage.editing-arena-bounds .ring-boundary.dragging { background: #f4bd52; color: #071015; transform: translate(-50%, -50%) scale(1.06) }
.narrator-sprite { position: absolute; z-index: 2; pointer-events: none; transform-origin: 50% 100% }
.narrator-sprite[hidden] { display: none }
.narrator-sprite img { display: block; width: 100%; height: auto; max-height: 42vh; object-fit: contain; filter: drop-shadow(0 8px 18px #000b); transform-origin: 50% 100% }
.narrator-sprite[data-position="top-left"] { top: 16%; left: 2.5% }
.narrator-sprite[data-position="top-center"] { top: 15%; left: 50%; transform: translateX(-50%) }
.narrator-sprite[data-position="top-right"] { top: 16%; right: 2.5% }
.narrator-sprite[data-position="bottom-left"] { bottom: 3%; left: 2.5% }
.narrator-sprite[data-position="bottom-right"] { bottom: 3%; right: 2.5% }
.narrator-sprite.speaking img { animation: narratorTalk .34s ease-in-out infinite alternate; filter: drop-shadow(0 10px 24px #000d) brightness(1.06) }

/* HUD deitado: cada lutador ocupa um lado e o medidor de empurrão fica no meio. */
.arena-hud { top: 3.5%; left: 3%; right: 3%; display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: calc(var(--u) * 2); text-shadow: 0 2px 6px #000 }
.side { display: flex; flex-direction: column }
.side.right { text-align: right; align-items: flex-end }
.side small { color: #cbd7dc; font-size: calc(var(--u) * 1.05); margin-top: 2px }

.hp { width: 100%; height: calc(var(--u) * 1.3); margin-top: calc(var(--u) * 0.7); background: #243640; border: 2px solid #c8d2d5; border-radius: 10px; overflow: hidden }
.hp i { display: block; height: 100%; background: var(--red); transition: width .22s ease-out }
.side.right .hp i { background: var(--blue); margin-left: auto }

.center { text-align: center }
.center #round { display: block; font-size: calc(var(--u) * 1.7); letter-spacing: .16em }
.center #queue { font-size: calc(var(--u) * 1) ; color: var(--gold); letter-spacing: .12em }
.center #modeLabel { display: block; margin-top: calc(var(--u) * .35); color: #d7e2e6; font-size: calc(var(--u) * .78); font-weight: 800; letter-spacing: .14em }
.push { position: relative; height: calc(var(--u) * 1.9); margin-top: calc(var(--u) * 0.8); border: 2px solid #c8d2d5; border-radius: 10px; overflow: hidden }
.push i { display: block; height: 100%; transition: width .35s cubic-bezier(.3, .9, .3, 1) }
.push u { position: absolute; top: -3px; bottom: -3px; width: 4px; margin-left: -2px; background: #fff; box-shadow: 0 0 10px #000; transition: left .35s cubic-bezier(.3, .9, .3, 1) }
.push-label { font-style: normal; display: block; margin-top: calc(var(--u) * 0.4); font-size: calc(var(--u) * 0.95); letter-spacing: .22em; color: #9fb3bd }
.arena-hud[data-mode="mma"] .push,
.arena-hud[data-mode="mma"] .push-label { display: none }
.arena-hud[data-mode="sumo"] .hp { display: none }

.rank { margin-top: calc(var(--u) * 1); font-size: calc(var(--u) * 1.15); width: 100%; display: grid; row-gap: var(--rank-row-gap, 0); color: #e6eef2 }
.rank span { display: flex; gap: 6px; align-items: center; padding: var(--rank-row-padding, 1px) calc(var(--rank-row-padding, 1px) * 1.6); color: inherit; background: var(--rank-row-bg, transparent); border-radius: calc(var(--u) * .25); -webkit-text-stroke: var(--rank-outline-width, 0) var(--rank-outline, #000); paint-order: stroke fill; text-shadow: 0 calc(var(--u) * .08) var(--rank-shadow-blur, 0) var(--rank-shadow, transparent) }
.team-info-b .rank span { flex-direction: row-reverse }
.rank i { font-style: normal; color: var(--rank-accent, var(--gold)); font-weight: 900; min-width: calc(var(--u) * 1.2) }
.rank em { font-style: normal; margin-left: auto; color: var(--rank-accent, var(--gold)); font-weight: 800 }
.team-info-b .rank em { margin-left: 0; margin-right: auto }
.rank .empty { color: #8fa3ac; font-style: italic }

/* Na arena deitada a faixa livre é embaixo (piso) e logo abaixo do HUD. */
.donor {
  left: 50%; bottom: 3%; transform: translateX(-50%) translateY(14px); opacity: 0;
  width: 40%; text-align: center; padding: calc(var(--u) * 0.8) calc(var(--u) * 1.4); border-radius: 12px;
  background: linear-gradient(180deg, #0e1b23e6, #060d11e6); border: 2px solid var(--team, var(--gold));
  box-shadow: 0 10px 40px #000a;
}
.donor.show { animation: donorIn 4.2s ease forwards }
.donor b { display: block; font-size: calc(var(--u) * 1.9); color: #fff }
.donor span { display: block; font-size: calc(var(--u) * 1.2); color: var(--team, var(--gold)); font-weight: 800; letter-spacing: .05em }
.donor em { font-style: normal; font-weight: 900; font-size: calc(var(--u) * 1.5); color: var(--gold) }
.donor i { font-style: normal; display: block; font-size: calc(var(--u) * 0.9); color: #b6c7cf; margin-top: 2px }
.donor u { text-decoration: none; display: inline-block; margin-top: 3px; font-size: calc(var(--u) * 1.1); color: #7dd3fc; font-weight: 900 }

.narration { top: 23%; left: 50%; transform: translateX(-50%); width: 46%; text-align: center; font-weight: 800; letter-spacing: .02em; color: #fff; text-shadow: 0 2px 7px #000; opacity: 0; font-size: calc(var(--u) * 1.35) }
.narration.show { animation: fadeHold 6s ease forwards }

.special { left: 50%; top: 40%; transform: translate(-50%, -50%) scale(.6); font-size: calc(var(--u) * 4.6); font-weight: 1000; letter-spacing: .1em; color: var(--gold); opacity: 0; text-shadow: 0 0 26px #000, 0 4px 10px #000; width: 92%; text-align: center }
.special.show { animation: specialIn 1.6s ease-out forwards }
.winner { left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: calc(var(--u) * 5.2); font-weight: 1000; text-align: center; width: 92%; text-shadow: 0 4px 12px #000; opacity: 0 }
.winner.show { animation: winner 3.5s ease }

.arena-only .control-shell { display: none }

@keyframes donorIn {
  8% { opacity: 1; transform: translateX(-50%) translateY(0) }
  85% { opacity: 1; transform: translateX(-50%) translateY(0) }
  100% { opacity: 0; transform: translateX(-50%) translateY(10px) }
}
@keyframes narratorTalk {
  0% { transform: translateY(0) rotate(-1deg) scale(1) }
  45% { transform: translateY(-2.4%) rotate(.8deg) scale(1.018, .985) }
  100% { transform: translateY(-4%) rotate(1.2deg) scale(.99, 1.025) }
}
@keyframes fadeHold { 6%, 85% { opacity: 1 } 100% { opacity: 0 } }
@keyframes specialIn {
  15% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) }
  70% { opacity: 1; transform: translate(-50%, -50%) scale(1) }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(.95) }
}
@keyframes winner { 20%, 70% { opacity: 1; transform: translate(-50%, -50%) scale(1) } 100% { opacity: 0 } }

@media (max-width: 820px) {
  .control-shell { position: relative; left: auto; top: auto; bottom: auto; width: 100%; border-radius: 0; min-height: 100vh }
  /* Em tela estreita o painel ocupa tudo e a prévia da arena sai do caminho —
     mas nunca no modo OBS, onde a arena é a única coisa que existe na página. */
  .arena-shell { display: none }
  .arena-only .arena-shell { display: flex }
  .two, .gift-row, .gift-simple-fields, .grid-buttons, .simulator, .mode-picker, .comment-attack-fields { grid-template-columns: 1fr }
  .gift-row button { grid-column: span 1 }
  .control-shell footer { padding-bottom: 20px }
}