/* =====================================================================
   Identidade do MU Idle — logotipo cromado, botões de pedra, tela de
   login e cabeçalho centralizado da seleção de personagem.
   Carregado depois de base.css/class-select.css para fechar o tema.
   ===================================================================== */

:root {
    --mu-brand-gold: #edd489;
    --mu-brand-steel: #8fa6b4;
}

/* =========================== LOGOTIPO ============================== */
/* "MU" em cromo escovado e "IDLE" espaçado embaixo, no mesmo arranjo do
   logo clássico (palavra grande + linha fina de letras espaçadas). */
.mu-wordmark {
    --mu-logo-size: 64px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    user-select: none;
}
.mu-wordmark-lg { --mu-logo-size: 92px; }
.mu-wordmark-sm { --mu-logo-size: 46px; }

.mu-wordmark-main {
    position: relative;
    /* Capitulares romanas gravadas: o que mais se aproxima do logo original
       entre as fontes já instaladas nesta máquina (Engravers MT / Perpetua
       Titling MT vêm com o Office). Degrada para Georgia em outra máquina. */
    font-family: 'Trajan Pro', 'Cinzel', 'Engravers MT', 'Perpetua Titling MT',
                 'Copperplate Gothic Bold', 'Bookman Old Style', Georgia, serif;
    font-weight: 900;
    font-size: var(--mu-logo-size);
    letter-spacing: .1em;
    text-indent: .1em;
    background: linear-gradient(180deg,
        #fdffff 0%, #e2eff7 13%, #a9c6d8 29%, #48697f 45%,
        #17232d 51%, #52788f 57%, #aecbdd 71%, #edf6fb 85%, #7f9db1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .85)) drop-shadow(0 0 20px rgba(120, 190, 240, .3));
}
/* Duas camadas de contorno atrás do texto formam o relevo metálico. */
.mu-wordmark-main::before,
.mu-wordmark-main::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    z-index: -1;
}
.mu-wordmark-main::before {
    -webkit-text-stroke: .15em #0a1016;
    color: #0a1016;
}
.mu-wordmark-main::after {
    -webkit-text-stroke: .07em #6b8fa6;
    color: transparent;
}

.mu-wordmark-sub {
    display: flex;
    align-items: center;
    gap: .8em;
    align-self: stretch;
    margin-top: calc(var(--mu-logo-size) * .1);
    color: #d3e6f2;
    font: 700 calc(var(--mu-logo-size) * .2)/1 'Segoe UI', Tahoma, sans-serif;
    letter-spacing: .62em;
    text-indent: .62em;
    text-shadow: 0 1px 2px #000, 0 0 14px rgba(120, 190, 240, .5);
    white-space: nowrap;
}
.mu-wordmark-sub::before,
.mu-wordmark-sub::after {
    content: '';
    flex: 1;
    min-width: 1.2em;
    height: 1px;
    background: linear-gradient(90deg, transparent, #7fa2b8);
}
.mu-wordmark-sub::after { background: linear-gradient(90deg, #7fa2b8, transparent); }

.mu-wordmark-tag {
    margin-top: calc(var(--mu-logo-size) * .11);
    color: var(--mu-brand-gold);
    font: 700 calc(var(--mu-logo-size) * .15)/1 Georgia, serif;
    letter-spacing: .32em;
    text-indent: .32em;
    text-transform: uppercase;
    text-shadow: 0 2px 3px #000;
}

/* ======================= BOTÃO DE PEDRA ============================ */
.mu-stone-btn {
    padding: 9px 18px;
    border: 1px solid #8a979d;
    border-radius: 0;
    background: linear-gradient(180deg, #5c686e, #1b2225);
    color: #e9f2f5;
    font: 700 13px/1 Georgia, serif;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    text-shadow: 0 1px 2px #000;
    cursor: pointer;
    box-shadow: inset 0 1px rgba(232, 246, 250, .3), inset 0 -8px 14px rgba(0, 0, 0, .5), 0 3px 6px rgba(0, 0, 0, .65);
    transition: filter .15s ease, transform .1s ease;
}
.mu-stone-btn:hover { filter: brightness(1.3); }
.mu-stone-btn:active { transform: translateY(1px); box-shadow: inset 0 3px 9px rgba(0, 0, 0, .8); }
.mu-stone-btn-ok {
    border-color: #b8a367;
    background: linear-gradient(180deg, #6d6340, #241f12);
    color: var(--mu-brand-gold);
}
.mu-stone-btn[disabled] {
    filter: grayscale(1) brightness(.62);
    cursor: not-allowed;
    transform: none;
}

/* ===================== SERVIDORES E TELA DE LOGIN ================== */
#screen-server-select[style*="block"],
#screen-auth[style*="block"] { display: flex !important; }

#screen-server-select { position:fixed; z-index:50000; inset:0; width:100%; max-width:none; min-height:100vh; align-items:center; justify-content:center; overflow:hidden; isolation:isolate; background:linear-gradient(rgba(2,7,12,.02),rgba(2,6,10,.13)),url('../assets/img/ui/mu-idle-login-cast-v2.png') center/cover no-repeat; }
#screen-server-select::before { display:none; }
.mu-server-select { width:min(570px,96vw); display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center; transform:translateY(clamp(175px,29vh,310px)); }
.mu-server-panel { width:min(540px,96vw); border:0; background:transparent; box-shadow:none; }
.mu-server-titlebar { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-bottom:1px solid #75848a; background:linear-gradient(#4d5d63,#182226); color:#e8f2f3; font:700 16px Georgia,serif; letter-spacing:1.5px; text-transform:uppercase; }
.mu-server-titlebar small { color:#acc2c7; font:10px 'Segoe UI',sans-serif; letter-spacing:.8px; text-transform:none; }
.mu-server-row { width:calc(100% - 24px); margin:12px; display:grid; grid-template-columns:24px minmax(0,1fr) 98px auto; align-items:center; gap:11px; padding:13px 14px; border:1px solid #879397; background:linear-gradient(180deg,#303c40,#11191c); color:#e9f2f2; text-align:left; cursor:pointer; box-shadow:inset 0 1px rgba(226,245,249,.18),inset 0 -10px 18px rgba(0,0,0,.44); transition:filter .16s ease, transform .16s ease; }
.mu-server-row:hover { filter:brightness(1.28); transform:translateY(-1px); border-color:#d4bd70; }.mu-server-row:disabled { filter:grayscale(1) brightness(.65); cursor:not-allowed; transform:none; }
.mu-server-back { display:block; margin:10px 12px -5px; padding:0; border:0; background:transparent; color:#b9d7e0; font:700 11px 'Segoe UI',sans-serif; text-decoration:underline; cursor:pointer; }.mu-server-back:hover { color:#f0cf77; }
.mu-server-orb { width:13px; height:13px; border:1px solid #91f1b5; border-radius:50%; background:#26b85e; box-shadow:0 0 9px #29d974; }.mu-server-orb.is-offline { border-color:#b28b8b; background:#7c2222; box-shadow:0 0 8px #aa3535; }.mu-server-orb.is-checking { border-color:#d8bd75; background:#9c762d; box-shadow:0 0 8px #d8a73b; }
.mu-server-name,.mu-server-population { display:flex; min-width:0; flex-direction:column; gap:3px; }.mu-server-name b { overflow:hidden; color:#f4df9a; font:700 16px Georgia,serif; letter-spacing:.8px; text-overflow:ellipsis; white-space:nowrap; }.mu-server-name small,.mu-server-population small { color:#a9c0c5; font:10px 'Segoe UI',sans-serif; }.mu-server-population { align-items:end; }.mu-server-population b { color:#8de7ab; font:700 12px Georgia,serif; white-space:nowrap; }.mu-server-connect { padding:6px 8px; border:1px solid #a98d49; background:linear-gradient(#655a37,#282111); color:#f2dc91; font:700 11px Georgia,serif; letter-spacing:.5px; white-space:nowrap; }
.mu-server-help { margin:0 12px 13px; color:#9eafb4; font:11px/1.4 'Segoe UI',sans-serif; }.mu-server-footer { color:#bed0d2; font:700 10px 'Segoe UI',sans-serif; letter-spacing:1.1px; text-shadow:0 1px 3px #000; }

/* Navegador em duas colunas: o mundo permanece à esquerda e os canais
   aparecem ao lado, reproduzindo o fluxo visual clássico. */
.mu-server-panel { width:min(540px,96vw); }
.mu-server-titlebar,.mu-server-help { position:absolute!important; width:1px!important; height:1px!important; margin:-1px!important; padding:0!important; overflow:hidden!important; clip:rect(0 0 0 0)!important; white-space:nowrap!important; border:0!important; }
.mu-server-browser { display:flex; align-items:flex-start; justify-content:center; gap:10px; min-height:58px; padding:0; }
.mu-world-list { width:142px; flex:0 0 142px; }
.mu-server-row { position:relative; overflow:hidden; border:1px solid #857d72; background:linear-gradient(180deg,rgba(35,34,32,.76),rgba(4,6,7,.78)); box-shadow:0 0 0 1px #050606,0 5px 14px rgba(0,0,0,.66),inset 0 1px rgba(235,232,217,.2),inset 0 0 12px rgba(0,0,0,.66); backdrop-filter:blur(2px); clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px); }
.mu-server-row::before { content:''; position:absolute; inset:3px; border:1px solid rgba(141,148,146,.38); pointer-events:none; }
.mu-world-list .mu-server-row { width:100%; min-height:53px; margin:0; grid-template-columns:minmax(0,1fr); gap:0; padding:7px 9px 16px; }
.mu-world-list .mu-server-name { align-items:center; text-align:center; }
.mu-world-list .mu-server-name b { color:#eef4f6; font-size:12px; }.mu-world-list .mu-server-name small { font-size:8px; }
.mu-world-list .mu-server-orb { width:8px; height:8px; }
.mu-channel-list { width:330px; flex:0 1 330px; }
.mu-channel-row { width:100%; min-height:53px; margin:0; grid-template-columns:minmax(0,1fr); gap:0; padding:6px 9px 16px; }
.mu-channel-row .mu-server-name { align-items:center; text-align:center; }
.mu-channel-row .mu-server-orb { width:8px; height:8px; }
.mu-channel-row .mu-server-name b { color:#f2d23d; font:700 11px 'Cinzel','Copperplate Gothic Bold',Georgia,serif; }.mu-channel-row .mu-server-name em { color:#d9e4df; font-style:normal; font-weight:400; }.mu-channel-row .mu-server-name small { color:#a8c6b0; font-size:8px; }.mu-channel-row .mu-server-population b { color:#78e88b; font-size:9px; }.mu-channel-row .mu-server-population small { color:#e2e8e4; font-size:9px; }
.mu-channel-caption { margin:4px 0 0; color:#cbd6d7; font:700 8px 'Segoe UI',sans-serif; letter-spacing:2px; text-align:center; }
.mu-server-load { position:absolute; z-index:2; left:8px; right:8px; bottom:5px; display:grid; grid-template-columns:repeat(10,1fr); gap:2px; height:5px; }
.mu-server-load i { display:block; min-width:0; border:1px solid rgba(77,92,88,.76); background:rgba(2,7,7,.9); box-shadow:inset 0 1px rgba(255,255,255,.05); }
.mu-server-load i.is-filled { border-color:#73b993; background:linear-gradient(#49dc88,#176d42); box-shadow:0 0 3px rgba(78,235,142,.62),inset 0 1px rgba(220,255,232,.35); }
.mu-server-load.is-offline i { border-color:#644140; background:#210d0d; }
@media (max-width:560px) { .mu-server-browser { gap:7px; padding:9px; }.mu-world-list { width:105px; flex-basis:105px; }.mu-channel-list { width:calc(100% - 112px); }.mu-channel-row { grid-template-columns:minmax(0,1fr); padding:7px 6px; }.mu-channel-row .mu-server-name b { font-size:9px; }.mu-channel-row .mu-server-population b,.mu-channel-row .mu-server-population small { font-size:8px; } }

.mu-login {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(18px, 4vh, 40px);
    margin: 0 auto;
    padding: 12px;
}
.mu-login-logo { width:min(360px,82vw); max-height:218px; }

/* Painel com trilhos laterais, lembrando as colunas do login original. */
.mu-login-box {
    position: relative;
    width: min(430px, 92vw);
    padding: 0 26px 22px;
    border: 2px solid #8d9aa0;
    background:
        linear-gradient(180deg, rgba(126, 140, 146, .32), rgba(12, 17, 19, .9)),
        url('../assets/img/ui/inventory-forged-metal-bg.png') center / cover;
    box-shadow:
        0 0 0 2px #080b0d,
        0 0 0 4px #3f4a51,
        0 24px 58px rgba(0, 0, 0, .85),
        inset 0 1px rgba(226, 242, 246, .3),
        inset 0 -26px 46px rgba(0, 0, 0, .6);
}
.mu-login-box::before,
.mu-login-box::after {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    width: 7px;
    background: linear-gradient(90deg, #0a0f11, #6f7f87 45%, #aebec4 55%, #0a0f11);
    box-shadow: 0 0 6px rgba(0, 0, 0, .8);
    pointer-events: none;
}
.mu-login-box::before { left: 8px; }
.mu-login-box::after { right: 8px; }

.mu-login-titlebar {
    margin: 0 -26px 16px;
    padding: 9px 12px;
    border-bottom: 1px solid rgba(180, 202, 208, .35);
    background: linear-gradient(180deg, rgba(84, 98, 103, .8), rgba(11, 16, 18, .92));
    box-shadow: inset 0 1px rgba(232, 248, 252, .2);
    color: #dcecf2;
    font: 700 12px/1.3 Georgia, serif;
    letter-spacing: 2.4px;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 1px 2px #000;
}

.mu-login-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin: 0 0 16px;
}
.mu-login-tab {
    padding: 8px 6px;
    border: 1px solid #6d7a80;
    border-radius: 0;
    background: linear-gradient(180deg, #2c363a, #10171a);
    color: #93a5ac;
    font: 700 12px/1 Georgia, serif;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .7);
    transition: color .15s ease, background .15s ease;
}
.mu-login-tab.is-active {
    border-color: #b8a367;
    background: linear-gradient(180deg, #6d6340, #241f12);
    color: var(--mu-brand-gold);
    box-shadow: inset 0 1px rgba(255, 240, 200, .28), 0 2px 5px rgba(0, 0, 0, .6);
}

.mu-login-form { display: flex; flex-direction: column; gap: 11px; }
.mu-login-hint {
    margin: 0 0 2px;
    color: #93a7af;
    font: 12px/1.4 'Segoe UI', sans-serif;
    text-align: center;
}

.mu-login-field {
    display: grid;
    grid-template-columns: 88px 1fr;
    align-items: center;
    gap: 10px;
}
.mu-login-field > span {
    color: #b9cdd6;
    font: 700 12px/1 Georgia, serif;
    letter-spacing: 1px;
    text-align: right;
    text-shadow: 0 1px 2px #000;
}
.mu-login-field input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #6f7d84;
    border-radius: 0;
    background: linear-gradient(180deg, #05080a, #0b1114);
    color: var(--mu-brand-gold);
    font: 700 14px/1.2 Georgia, serif;
    letter-spacing: 1px;
    text-shadow: 0 1px 2px #000;
    outline: none;
    box-shadow: inset 0 2px 7px rgba(0, 0, 0, .9);
}
.mu-login-field input::placeholder { color: #5b696f; font-weight: 400; letter-spacing: .5px; }
.mu-login-field input:focus {
    border-color: #b3c4c9;
    box-shadow: inset 0 2px 7px rgba(0, 0, 0, .9), 0 0 12px rgba(180, 214, 224, .35);
}

.mu-login-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 5px;
}
.mu-login-recover {
    align-self: center;
    padding: 1px 4px;
    border: 0;
    color: #9cc9dc;
    background: transparent;
    font: 700 11px 'Segoe UI', sans-serif;
    text-decoration: underline;
    cursor: pointer;
}
.mu-login-recover:hover { color: #f0cf77; }
.mu-login-msg {
    margin-top: 12px;
    min-height: 17px;
    color: #f08b8b;
    font: 13px/1.4 'Segoe UI', sans-serif;
    text-align: center;
    text-shadow: 0 1px 2px #000;
}
.mu-login-server-back { display:block; margin:10px auto -9px; padding:2px 5px; border:0; background:transparent; color:#9cc9dc; font:700 11px 'Segoe UI',sans-serif; text-decoration:underline; cursor:pointer; }.mu-login-server-back:hover { color:#f0cf77; }

/* A marca e os cinco heróis agora fazem parte do mesmo cenário. Os controles
   permanecem em HTML sobre o espaço livre do convés. */
#screen-auth { position:fixed; z-index:50000; inset:0; width:100%; max-width:none; min-height:100vh; align-items:center; justify-content:center; overflow:hidden; isolation:isolate; background:linear-gradient(rgba(2,7,12,.02),rgba(2,6,10,.13)),url('../assets/img/ui/mu-idle-login-cast-v2.png') center/cover no-repeat; }
#screen-auth::before { display:none; }
.mu-login { width:min(370px,88vw); min-height:100vh; justify-content:flex-end; gap:0; padding:0 0 clamp(28px,4.5vh,52px); }
.mu-login-box { width:min(300px,80vw); padding:3px 12px 10px; border:11px solid transparent; border-image-source:url('../assets/img/ui/mu-idle-login-gothic-v1.png'); border-image-slice:170 360; border-image-width:19px; border-image-outset:5px; border-image-repeat:stretch; background:linear-gradient(180deg,rgba(20,22,22,.42),rgba(2,4,5,.52)); box-shadow:0 12px 28px rgba(0,0,0,.58),inset 0 0 15px rgba(0,0,0,.48); backdrop-filter:blur(1.5px); }
.mu-login-box::before,.mu-login-box::after { display:none; }
.mu-login-titlebar { margin:-1px -8px 9px; padding:4px 9px; border-bottom:1px solid rgba(159,166,163,.42); background:rgba(3,4,4,.18); color:#dce2df; font:700 10px 'Cinzel','Copperplate Gothic Bold',Georgia,serif; letter-spacing:1.2px; }
.mu-login-tabs { width:176px; margin:0 auto 9px; gap:4px; }.mu-login-tab { padding:5px 4px; border-color:#706c64; background:linear-gradient(rgba(54,55,53,.72),rgba(9,10,10,.76)); font-size:9px; }
.mu-login-form { gap:7px; }.mu-login-field { grid-template-columns:67px 1fr; gap:7px; }.mu-login-field>span { color:#d0d1cb; font:700 10px Georgia,serif; }.mu-login-field input { padding:5px 7px; border-color:#817e77; background:rgba(1,3,4,.78); font-size:11px; }.mu-login-actions { place-items:center; margin-top:2px; }.mu-login-actions .mu-stone-btn { width:78px; padding:5px 9px; border-color:#867759; background:linear-gradient(rgba(91,78,47,.88),rgba(24,21,15,.9)); font-size:10px; }.mu-login-msg { margin-top:6px; min-height:12px; font-size:10px; }.mu-login-server-back { margin:6px auto 0; font-size:8px; }

/* A marca fecha a composição com um letreiro próprio; a primeira escolha
   entra logo abaixo dela e os indicadores ficam reservados aos canais. */
.mu-idle-tagline-art { position:absolute; z-index:2; top:clamp(275px,40.5vh,330px); left:50%; width:min(430px,72vw); height:54px; object-fit:cover; object-position:center; transform:translateX(-50%); filter:brightness(1.25) saturate(1.28); mix-blend-mode:multiply; opacity:.9; pointer-events:none; user-select:none; }
.mu-idle-tagline-copy { position:absolute; z-index:3; top:calc(clamp(275px,40.5vh,330px) + 22px); left:50%; width:min(332px,58vw); transform:translateX(-50%); color:#f1e5c1; font:700 clamp(7px,.72vw,10px)/1 Georgia,serif; letter-spacing:.45px; text-align:center; text-transform:uppercase; text-shadow:0 1px 2px #000,0 0 5px #000; pointer-events:none; user-select:none; }
.mu-server-select { width:min(680px,96vw); transform:translateY(clamp(50px,9vh,84px)); }
.mu-server-browser { gap:16px; }
.mu-world-list { width:212px; flex-basis:212px; }
.mu-world-list .mu-server-row { min-height:69px; grid-template-columns:minmax(0,1fr); gap:0; padding:11px 13px; }
.mu-world-list .mu-server-name b { font-size:17px; letter-spacing:1px; }
.mu-world-list .mu-server-name small { font-size:10px; }
.mu-world-list .mu-server-orb { width:10px; height:10px; }
.mu-channel-list { width:390px; flex-basis:390px; }
.mu-channel-row { min-height:64px; grid-template-columns:minmax(0,1fr); gap:0; padding:9px 12px 18px; }
.mu-channel-row .mu-server-name b { font-size:15px; }.mu-login { box-sizing:border-box; width:min(460px,92vw); min-height:100vh; justify-content:flex-start; padding:clamp(355px,49vh,420px) 0 0; transform:translateY(clamp(70px,12vh,110px)); }
.mu-login-box { width:min(390px,86vw); padding:8px 18px 17px; border-width:15px; border-image-width:27px; border-image-outset:8px; }
.mu-login-titlebar { margin:-1px -10px 13px; padding:6px 10px; font-size:12px; }.mu-login-tabs { width:226px; margin-bottom:13px; }.mu-login-tab { padding:7px 6px; font-size:11px; }.mu-login-form { gap:10px; }.mu-login-field { grid-template-columns:82px 1fr; gap:9px; }.mu-login-field>span { font-size:12px; }.mu-login-field input { padding:7px 9px; font-size:13px; }.mu-login-actions .mu-stone-btn { width:96px; padding:7px 11px; font-size:12px; }.mu-login-server-back { margin-top:9px; font-size:10px; }
#screen-auth .mu-idle-tagline-copy { position:static; left:auto; top:auto; display:block; width:min(370px,84vw); margin:18px auto 0; padding:8px 14px; transform:none; color:#eadba8; border-top:1px solid rgba(178,146,67,.58); border-bottom:1px solid rgba(75,134,158,.48); background:linear-gradient(90deg,transparent,rgba(8,17,21,.54) 18%,rgba(8,17,21,.54) 82%,transparent); font:700 clamp(8px,.72vw,10px)/1.25 Georgia,serif; letter-spacing:.7px; text-align:center; text-transform:uppercase; text-shadow:0 1px 2px #000,0 0 5px #000; pointer-events:none; user-select:none; }
@media (max-width:560px) {
    .mu-idle-tagline-art { top:clamp(250px,43vh,300px); width:min(390px,86vw); height:48px; }
    .mu-idle-tagline-copy { top:calc(clamp(250px,43vh,300px) + 20px); width:min(310px,69vw); font-size:7px; }
    .mu-server-select { transform:translateY(clamp(45px,12vh,75px)); }
    .mu-server-browser { gap:9px; }
    .mu-world-list { width:174px; flex-basis:174px; }
    .mu-world-list .mu-server-row { min-height:61px; padding:9px 11px; }
    .mu-world-list .mu-server-name b { font-size:15px; }
    .mu-channel-list { width:calc(100vw - 202px); flex-basis:calc(100vw - 202px); }
    .mu-channel-row { grid-template-columns:minmax(0,1fr); gap:0; padding:8px 8px 17px; }
    .mu-channel-row .mu-server-name b { font-size:10px; }
    .mu-login { padding-top:clamp(310px,46vh,370px); transform:translateY(clamp(58px,11vh,90px)); }
    .mu-login-box { width:min(360px,84vw); }
    #screen-auth .mu-idle-tagline-copy { width:min(330px,80vw); margin-top:14px; padding:7px 10px; font-size:8px; }
}

/* ============ CABEÇALHO CENTRALIZADO DA SELEÇÃO DE PERSONAGEM ====== */
.character-select-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* A sombra era lateral, feita para a coluna de texto à esquerda. Com o
       cabeçalho no centro, escurecer topo e base dá o contraste certo. */
    background: linear-gradient(180deg, rgba(3, 6, 9, .74), rgba(3, 6, 9, .1) 40%, rgba(3, 6, 9, .58)) !important;
}
.character-select-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding-bottom: clamp(8px, 2vh, 20px);
    text-align: center;
}
.character-title-art-wrap { display:flex; align-items:center; justify-content:center; width:min(500px,88vw); margin:0 auto; padding:0; }
.character-title-art { display:block; width:100%; height:auto; max-height:clamp(88px,17vh,140px); object-fit:contain; filter:drop-shadow(0 5px 7px rgba(0,0,0,.68)); }
#btn-show-create.mu-image-btn {
    display: block;
    width: min(370px, 82vw);
    height: clamp(116px, 16vh, 138px);
    margin: -2px auto 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    transition: filter .16s ease, transform .1s ease;
}
#btn-show-create.mu-image-btn img { display:block; width:100%; height:100%; object-fit:fill; pointer-events:none; filter:drop-shadow(0 3px 5px rgba(0,0,0,.72)); }
#btn-show-create.mu-image-btn:hover { filter:brightness(1.18) drop-shadow(0 0 6px rgba(67,145,210,.35)); }
#btn-show-create.mu-image-btn:active { transform:translateY(2px) scale(.985); }
#btn-show-create.mu-image-btn:focus-visible { outline:1px solid #75b6d0; outline-offset:3px; }

/* O palco deixa de ser posicionado por medidas fixas e passa a ocupar a
   sobra da coluna, então o cabeçalho pode crescer sem cobrir os heróis. */
.character-select-stage {
    position: static !important;
    inset: auto !important;
    flex: 1;
    width: 100%;
    min-height: 0;
    padding-bottom: 18px !important;
}
/* Com menos de 5 heróis a grade fixa de 5 colunas jogava todos para a
   esquerda; em coluna automática eles ficam sempre centrados no palco. */
.character-select-stage #character-list {
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 210px);
    justify-content: center;
    gap: clamp(2px, 1.4vw, 24px) !important;
}

@media (max-height: 760px) {
    .mu-wordmark { --mu-logo-size: 52px; }
    .mu-wordmark-lg { --mu-logo-size: 72px; }
    .character-select-head { gap: 6px; }
}