/* Slim elemental mode list and temporary portrait placement below rewards. */
body.hex-desktop-screens #lobby.home-menu .home-battle{justify-content:center}
body.hex-desktop-screens #lobby.home-menu .play-panel{align-items:center;padding-top:0}
body.hex-desktop-screens #lobby.home-menu .battle-type-picker{display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;width:min(250px,100%);align-self:center;gap:9px;padding:0;border:0;background:none}
body.hex-desktop-screens #lobby.home-menu .battle-type-picker button{position:relative;flex:none;display:flex;align-items:center;justify-content:flex-start;gap:13px;box-sizing:border-box;width:100%;min-height:50px;padding:10px 16px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--mode-light);background:linear-gradient(110deg,var(--mode-dark),#20172dec);border:1px solid var(--mode-edge);border-bottom-width:3px;border-radius:10px;box-shadow:inset 0 1px #ffffff16;transition:filter .2s,box-shadow .2s}
[data-menu-element=earth]{--mode-light:#ecdfbe;--mode-dark:#514335;--mode-edge:#899c5c}
[data-menu-element=wind]{--mode-light:#dafff0;--mode-dark:#284e49;--mode-edge:#77c6ae}
[data-menu-element=fire]{--mode-light:#ffe1bd;--mode-dark:#6c322d;--mode-edge:#df8660}
[data-menu-element=water]{--mode-light:#d6f1ff;--mode-dark:#294764;--mode-edge:#78b8db}
body.hex-desktop-screens #lobby.home-menu .battle-type-picker button[aria-pressed=true]{background:linear-gradient(110deg,var(--mode-dark),#443454);border-color:var(--mode-light);box-shadow:0 0 14px color-mix(in srgb,var(--mode-edge) 30%,transparent),inset 3px 0 var(--mode-light);color:var(--mode-light)}
body #lobby .mode-element-icon{width:25px;height:25px;flex:0 0 25px;fill:var(--mode-edge);color:var(--mode-light);filter:drop-shadow(0 0 4px #ffffff20)}
body.hex-desktop-screens #lobby.home-menu .game-menu .play-big,body.hex-desktop-screens #lobby.home-menu .mode-picker{width:min(370px,100%);box-sizing:border-box}
body.hex-desktop-screens #lobby.home-menu .lobby-tools{gap:10px}
body.hex-desktop-screens #lobby.home-menu .lobby-tools>.wizard-showcase{order:1;width:100%;height:130px!important;min-height:130px!important;flex:0 0 130px!important;margin:0!important}
body.hex-desktop-screens #lobby.home-menu .lobby-tools>.wizard-showcase .character-stage{height:130px!important}
body.hex-desktop-screens #lobby.home-menu .lobby-tools>.wizard-showcase .home-equipped-wizard{width:230px!important;height:130px!important;top:0}/* Elemental motion frames the label, with no separate symbol. */
body.hex-desktop-screens #lobby.home-menu .battle-type-picker button{justify-content:center;overflow:hidden}
body #lobby .battle-type-picker .mode-element-effects{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:hidden;opacity:.85}
body #lobby .battle-type-picker .mode-name{position:relative;z-index:1;text-shadow:0 1px 4px #100b1f,0 0 8px #100b1f}
.mode-stones{animation:mode-stone-lift 4s ease-in-out infinite;transform-origin:center}
.mode-cracks{animation:mode-crack-glow 3.4s ease-in-out infinite}
.mode-gust{stroke-dasharray:90 55 20 45;animation:mode-gust-flow 7s linear infinite}
.mode-wind-wisp{animation:mode-crack-glow 4s ease-in-out infinite}
.mode-flame{transform-box:fill-box;transform-origin:center bottom;animation:mode-flame-dance 1.7s ease-in-out infinite alternate}
.mode-embers{animation:mode-ember-rise 2.8s ease-out infinite}
.mode-wave{animation:mode-wave-roll 4.5s ease-in-out infinite}
.mode-wave-back{animation-direction:reverse;animation-duration:6s}
.mode-bubbles{animation:mode-bubble-rise 3.8s ease-in-out infinite}
.mode-element-effects .mode-fx-late{animation-delay:-1.8s}
@keyframes mode-stone-lift{0%,100%{transform:translateY(1px) rotate(-1deg)}50%{transform:translateY(-3px) rotate(1deg)}}
@keyframes mode-crack-glow{0%,100%{opacity:.25}50%{opacity:.85}}
@keyframes mode-gust-flow{to{stroke-dashoffset:-420}}
@keyframes mode-flame-dance{from{transform:scale(.88,.8);opacity:.65}to{transform:scale(1.05,1.12);opacity:1}}
@keyframes mode-ember-rise{0%{transform:translateY(8px);opacity:0}20%{opacity:1}100%{transform:translate(4px,-14px);opacity:0}}
@keyframes mode-wave-roll{0%,100%{transform:translate(-3px,2px)}50%{transform:translate(3px,-2px)}}
@keyframes mode-bubble-rise{0%{transform:translateY(7px);opacity:0}25%{opacity:.9}100%{transform:translate(2px,-11px);opacity:0}}
body.element-title-paused .mode-element-effects *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.mode-element-effects *{animation:none!important}}
html[data-motion=gentle] .mode-element-effects *,body.gentle-motion .mode-element-effects *{animation:none!important}
/* Rank Road and the mode list trade columns. */
body.hex-desktop-screens #lobby.home-menu .play-panel>.home-rank-hero{order:0;width:250px;max-width:100%;min-height:250px;padding:12px 18px;gap:6px;align-self:center}
body.hex-desktop-screens #lobby.home-menu .home-rank-rail>.battle-type-picker{order:0;width:100%;margin:0}
body.hex-desktop-screens #lobby.home-menu .menu-group>#open-friends.home-friends-heading{display:flex!important;align-items:center;justify-content:center!important;width:100%;height:32px;min-height:32px;padding:4px 10px!important;margin:0 0 8px!important;font-size:12px!important;gap:7px;border-radius:10px}
body.hex-desktop-screens #lobby.home-menu .home-friends-heading img{width:22px;height:22px}
/* Requested right-column order: Friends, character, books/wardrobe, Rewards. */
body.hex-desktop-screens #lobby.home-menu .lobby-tools>.home-friends-heading{order:-3;display:flex!important;align-items:center;justify-content:center!important;width:100%;height:32px;min-height:32px;flex:0 0 32px;padding:4px 10px!important;margin:0!important;font-size:12px!important;gap:7px;border-radius:10px;box-sizing:border-box}
body.hex-desktop-screens #lobby.home-menu .lobby-tools>.wizard-showcase{order:-2}
body.hex-desktop-screens #lobby.home-menu .lobby-tools>.hub-nav{order:-1}
body.hex-desktop-screens #lobby.home-menu .lobby-tools>.home-rewards{order:0}