/* Arena command room: match preparation and rankings share quiet steel chrome. */
#tab-arena .arena-section-nav { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; padding: 4px; margin: 0 0 18px; border: 1px solid #ffffff12; border-radius: 16px; background: #14171e; }
#tab-arena .arena-section-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 62px; padding: 8px 3px; border-radius: 12px; border: 0; background: none; color: #9da4b2; font-size: 10px; }
#tab-arena .arena-section-nav button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#tab-arena .arena-section-nav button[aria-current] { color: #f4f2f6; background: #292c38; box-shadow: inset 0 1px #ffffff0b; }
#tab-arena .arena-section-nav button[aria-current]::after { display: none; }
#tab-arena .workbench-heading { min-height: 0; padding: 20px 18px 16px; border: 1px solid #ffffff12; border-radius: 22px; background: #151821 url('assets/arena/nocturne-324.webp') center 23%/cover; }
#tab-arena .workbench-heading::before { background: linear-gradient(90deg,#12151df5,#12151d8c),linear-gradient(0deg,#12151d,transparent); }
#tab-arena .workbench-title-row { margin-bottom: 14px; }
#tab-arena .workbench-title-row h1 { font: 750 26px/1.15 var(--font-body); color: #f0edf3; }
#tab-arena .workbench-settings-toggle { border-radius: 12px; border-color: #ffffff1c; background: #ffffff08; color: #d3c6d6; }
#tab-arena .workbench-settings-toggle svg { fill: none; stroke: currentColor; stroke-width: 1.7; }
#tab-arena .workbench-league { gap: 12px; }
#tab-arena .workbench-shield { width: 34px; height: 40px; }
#tab-arena #ar-league { font-size: 16px; font-weight: 650; }
#tab-arena .workbench-rating { gap: 14px; color: #a9b0bf; font-size: 11px; }
#tab-arena .workbench-rating b { color: #efd1a2; }
#tab-arena .arena-league-progress { margin-top: 14px; }
#tab-arena .arena-league-progress #ar-prog-fill { background: #d894a7 !important; }
#tab-arena #ar-prog-text { font-size: 10px; color: #b0adbc; }
#tab-arena .workbench-presets { margin-top: 14px; padding: 4px; border: 1px solid #ffffff12; border-radius: 13px; background: #13161d; }
#tab-arena .workbench-deck { border: 0; border-radius: 9px; background: none; color: #a7aaba; }
#tab-arena .workbench-deck[aria-selected="true"] { background: #2c2b39; color: #f2e7ed; box-shadow: none; }
#tab-arena .workbench-squad { padding: 18px 14px 12px; margin-top: 16px; border: 1px solid #ffffff12; border-radius: 20px; background: #14171e; }
#tab-arena .workbench-section-title h2 { color: #e7e9ef; font: 700 16px var(--font-body); }
#tab-arena .workbench-section-title > span { color: #bfa3b0; }
#tab-arena .workbench-totals { border-color: #ffffff12; color: #9ba5b6; }
#tab-arena .workbench-totals b { color: #e3e7ef; }
#tab-arena .workbench-edit-line p { color: #a2a6b5; }
#tab-arena .workbench-dock { border-color: #ffffff18; border-radius: 18px; background: #171a24f5; }
#tab-arena #btn-arena-fight { border: 1px solid #cf8ba0; border-radius: 12px; background: #a84560; color: #fff1f5; }
#tab-arena #btn-arena-fight:disabled { border-color: #ffffff15; background: #2c2e3b; color: #979cac; }
#tab-arena .workbench-dock small { color: #a1a7b7; }
#tab-arena .arena-settings-panel { border-color: #ffffff16; background: #181b24; border-radius: 16px; }
#tab-arena .arena-settings-panel :is(button,select) { color: #e7e5ee; border-color: #ffffff22; background: #252936; }
#tab-arena .arena-active-banner { border-color: #9eb3ce3b; background: #1c2735; border-radius: 14px; }
#tab-arena .resume-btn { border-color: #9eb3ce60; background: #344459; color: #e1edfa; }
/* Selected attack is a short, numbered sequence, with one main action. */
body.arena-battle-open #tab-arena #arena-battle #battle-tactical-panel { padding: 12px !important; border-radius: 17px !important; background: #121722f2 !important; border-color: #ffffff1c !important; }
#arena-battle .battle-command-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
#arena-battle .battle-command-heading > span { color: #d8dfeb; font: 600 11px var(--font-body); }
#arena-battle .battle-command-heading button { display: flex; align-items: center; gap: 5px; min-height: 30px; padding: 4px 8px; border: 1px solid #ffffff14; border-radius: 8px; color: #aab9cc; background: #ffffff05; font-size: 9px; }
#arena-battle .battle-command-heading svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; }
#arena-battle .battle-selection-summary { display: grid; grid-template-columns: minmax(0,1fr) 18px minmax(0,1fr) 32px; gap: 8px; padding: 8px; margin-bottom: 8px; border: 1px solid #ffffff12; border-radius: 10px; background: #1a2331; }
#arena-battle .battle-selection-summary[hidden] { display: none; }
#arena-battle .battle-command-card { min-width: 0; }
#arena-battle .battle-command-card small { display: block; margin-bottom: 4px; color: #849bb7; font-size: 8px; }
#arena-battle .battle-command-card strong { display: block; font-size: 10px; }
#arena-battle .battle-command-card:nth-of-type(2) small { color: #bf8da0; }
body.arena-battle-open #tab-arena #arena-battle .active-caster-info { margin-bottom: 9px; }
body.arena-battle-open #tab-arena #arena-battle #btn-arena-attack { min-height: 46px !important; border-radius: 11px !important; background: #a64560 !important; border-color: #d18098 !important; box-shadow: inset 0 1px #e9a3b738,0 4px 12px #0003; }
body.arena-battle-open #tab-arena #arena-battle #btn-arena-attack:disabled { background: #253246 !important; border-color: #65789555 !important; color: #aebcd0 !important; }
#arena-battle .battle-connection-status { display: grid; grid-template-columns: 18px minmax(0,1fr) auto; align-items: center; gap: 7px; margin: 0 0 10px; padding: 9px; border: 1px solid #cd9a5355; border-radius: 10px; background: #342a1e; color: #eed8b9; font-size: 10px; }
#arena-battle .battle-connection-status[hidden] { display: none; }
#arena-battle .battle-connection-status svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
#arena-battle .battle-connection-status button { min-height: 34px; padding: 6px; border: 1px solid #dcb47744; border-radius: 7px; background: #483a28; color: #f0dfc8; font-size: 9px; }
#arena-battle .battle-connection-status button:disabled { opacity: .45; }
/* Ranking gives every name a stable place and a clearly aligned score. */
#tab-arena #arena-lb-wrap .workbench-back { display: none; }
#tab-arena #arena-lb-wrap .cards-head { padding: 2px 4px 16px; }
#tab-arena .arena-rating-title { display: flex; align-items: center; gap: 12px; }
#tab-arena .arena-rating-title > svg { width: 38px; height: 38px; padding: 9px; box-sizing: content-box; border: 1px solid #ffffff12; border-radius: 17px; background: #1a1d27; fill: none; stroke: #d6a5b6; stroke-width: 1.5; }
#tab-arena .arena-rating-title h2 { margin: 0 0 5px; font: 750 26px var(--font-body); color: #f2eef5; letter-spacing: -.025em; }
#tab-arena .arena-rating-title p { margin: 0; color: #9fa4b3; font-size: 11px; line-height: 1.4; }
#tab-arena #arena-lb-wrap .filter-row { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; margin-bottom: 16px; padding: 4px; border: 1px solid #ffffff12; border-radius: 12px; background: #14171d; }
#tab-arena #arena-lb-wrap .lb-filter { padding: 9px 3px; min-height: 38px; border: 0; border-radius: 8px; background: none; color: #9fa7b5; font: 600 10px var(--font-body); }
#tab-arena #arena-lb-wrap .lb-filter.active { color: #f1eaf1; background: #2c2c39; }
#tab-arena #leaderboard-list { display: flex; flex-direction: column; gap: 8px; }
#tab-arena .lb-me-card { margin: 0 0 8px; border: 1px solid #9a718956; border-radius: 17px; background: #231e2be8; box-shadow: none; }
#tab-arena .lb-me-fg { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 11px; padding: 14px; min-height: 78px; }
#tab-arena .lb-me-avatar { width: 44px; height: 44px; border: 1px solid #cbb9ca80; border-radius: 13px; }
#tab-arena .lb-me-avatar > * { width: 100%; height: 100%; object-fit: cover; }
#tab-arena .lb-me-kicker { color: #b39aaf; font-size: 10px; letter-spacing: 0; text-transform: none; }
#tab-arena .lb-me-name { color: #f0e9f3; font: 650 14px var(--font-body); }
#tab-arena .lb-me-rank { text-align: right; }
#tab-arena .lb-me-rank-num { color: #f0d7e5; font: 750 23px var(--font-body); }
#tab-arena .lb-me-rank-score { color: #b5abbd; font-size: 11px; }
#tab-arena .lb-podium { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 0 0 8px; padding: 10px 0 0; align-items: end; }
#tab-arena .lb-pod { width: auto; min-width: 0; height: 164px; padding: 0; border: 1px solid #ffffff14; border-radius: 16px; background: #191d28; box-shadow: none; transform: none; }
#tab-arena .lb-pod.p1 { height: 178px; border-color: #d9b88755; background: #242229; }
#tab-arena .lb-pod-fg { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; height: 100%; padding: 13px 7px; background: linear-gradient(0deg,#11151fea,transparent); }
#tab-arena .lb-pod-av { order: 1; width: 49px; height: 49px; margin: 0; border: 1px solid #cad3e877; border-radius: 15px; }
#tab-arena .lb-pod.p1 .lb-pod-av { width: 57px; height: 57px; border-color: #d9b887; }
#tab-arena .lb-pod-av > * { width: 100%; height: 100%; object-fit: cover; }
#tab-arena .lb-pod-name { order: 2; width: 100%; color: #e8eaf0; font: 650 11px var(--font-body); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tab-arena .lb-pod-score { order: 3; color: #b9c9df; font: 750 15px var(--font-body); font-variant-numeric: tabular-nums; }
#tab-arena .lb-pod.p1 .lb-pod-score { color: #e7cda1; }
#tab-arena .lb-pod-place { position: static; order: 0; width: 24px; height: 24px; display: grid; place-items: center; background: #ffffff0d; color: #bac4d6; border: 0; border-radius: 8px; font: 700 12px var(--font-body); }
#tab-arena .lb-pod-crown { position: static; order: 0; display: block; color: #d4b583; width: 22px; height: 22px; margin: 0; transform: none; }
#tab-arena .lb-pod-crown svg { width: 100%; height: 100%; }
#tab-arena .lb-row { min-height: 68px; padding: 0; margin: 0; border: 1px solid #ffffff0f; border-radius: 14px; background: #151922; }
#tab-arena .lb-row-fg { display: grid; grid-template-columns: 26px 38px minmax(0,1fr) auto; gap: 10px; min-height: 68px; padding: 11px 13px; align-items: center; background: linear-gradient(90deg,#121720e8,#121720bf); }
#tab-arena .lb-rank { width: auto; color: #818da4; font: 650 13px var(--font-body); }
#tab-arena .lb-avatar { width: 38px; height: 38px; border: 1px solid #ffffff20; border-radius: 11px; }
#tab-arena .lb-avatar > * { width: 100%; height: 100%; object-fit: cover; }
#tab-arena .lb-name { min-width: 0; color: #e0e4ed; font: 600 13px var(--font-body); }
#tab-arena .lb-trophy { color: #c5d0e2; font: 700 14px var(--font-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
#tab-arena #leaderboard-list [role="button"] { cursor: pointer; }
#tab-arena #leaderboard-list [role="button"]:focus-visible { outline: 2px solid #c6a3be; outline-offset: 2px; }
@media(hover:hover) { #tab-arena #leaderboard-list [role="button"]:hover { border-color: #a4aeca66; } }
@media(max-width:359px) { #tab-arena .arena-rating-title h2 { font-size: 23px; } #tab-arena .lb-row-fg { gap: 7px; padding-inline: 9px; grid-template-columns: 20px 32px minmax(0,1fr) auto; } #tab-arena .lb-avatar { width: 32px; height: 32px; } #tab-arena .lb-name { font-size: 11px; } #tab-arena .lb-trophy { font-size: 12px; } #tab-arena .lb-pod-score { font-size: 13px; } }
@media(prefers-reduced-motion:reduce) { #tab-arena .lb-pod { transition: none; } }