/* web/arena/midTuner.css --------------------------------------------------------------------------- Sizing of the middle column only: the 6 champion portraits, their HP / mana / momentum bars, and the VS medallion. The VFX canvas is a sibling and is left alone — its effects scale via the medallion size + window.__arenaMidScale, so the orb stays locked to the medallion. Desktop only. Mobile / PSP keep their own fixed layout, and nothing else in the UI (logo, history, action panel, buttons) is touched. Shared by BOTH arena shells — /arena/index.html (the link Discord hands out) and /demo/arena.html (the one the web client opens). It lived inline in the demo page alone, which is why a match launched from Discord came up with portraits at a different size to the same match launched from the web. Pair it with midTuner.js, which supplies the values. */ .battle-viewer:not(.portrait-mode):not(.landscape-mode):not(.mobile-mode) .player-team, .battle-viewer:not(.portrait-mode):not(.landscape-mode):not(.mobile-mode) .enemy-team, .battle-viewer:not(.portrait-mode):not(.landscape-mode):not(.mobile-mode) .vs-divider { zoom: var(--mid-scale, 1); } .battle-viewer:not(.portrait-mode):not(.landscape-mode):not(.mobile-mode) .player-team, .battle-viewer:not(.portrait-mode):not(.landscape-mode):not(.mobile-mode) .enemy-team { transform: translateY(var(--mid-voffset, 0px)); } /* One a side (engine.js marks .is-1v1): the 1v1 slider adds to Row align. */ .battle-viewer.is-1v1:not(.portrait-mode):not(.landscape-mode):not(.mobile-mode) .player-team, .battle-viewer.is-1v1:not(.portrait-mode):not(.landscape-mode):not(.mobile-mode) .enemy-team { transform: translateY(calc(var(--mid-voffset, 0px) + var(--mid-voffset-1v1, 0px))); } /* The whole relic pick, moved 235px below where the look centres it: title, cards, hint, HIDE and RETOOL travel as one, and under the Boon looks the floor ring travels with them so the plates keep standing on it (wr-arena.css reads the same --vx-shift for the ring). 235 is where the cog's Relic pick lever was left before it was removed (2026-09-19); set --vx-shift on to move it. Nudged with `top`, not a transform: the shell's own lift animation owns its transform, and a transform on the grid alone (the first cut) left the title and buttons behind. */ .vortex-overlay .vx-shell { top: var(--vx-shift, 235px); } /* Reset button inside the audio settings cog's Size section. */ #tuner-reset { width: 100%; margin-top: 6px; padding: 7px; cursor: pointer; border: 1px solid rgba(200,170,110,.25); border-radius: 8px; background: rgba(200,170,110,.08); color: #a09070; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; } #tuner-reset:hover { color: #c8aa6e; border-color: rgba(200,170,110,.5); }