/* =====================================================================
   VIP NO TOPO E ABA VIP DA LOJA (30/09, opção A do autor)
   ---------------------------------------------------------------------
   - A coroa do topo é mais um círculo da barra (o Combate B desenha os
     círculos); aqui só o aceso/apagado e o selinho verde dos dias.
   - O combate-b.css carrega DEPOIS deste arquivo, então as regras do topo
     levam `body` na frente para ganhar na especificidade.
   - Celular estreito (até 420 px): com a coroa são 5 círculos + a nuvem;
     o logo e os círculos encolhem um pouco para nada passar da borda.
   ===================================================================== */
/* A arte do Emblema tem margem própria: a 22 px (o tamanho dos outros círculos) ela sumia. */
body #gameShell .topbar .save-panel>.top-vip-button>.col-icone{width:28px!important;height:28px!important;transform:translateY(-4px)}
body #gameShell .topbar .save-panel>.top-vip-button>.col-icone img{width:28px!important;height:28px!important}
/* "VIP" escrito embaixo, dentro do círculo (pedido do autor, 30/09): cinza sem VIP, dourado com VIP. */
body #gameShell .topbar .save-panel>.top-vip-button>.vip-top-rotulo{position:absolute;left:0;right:0;bottom:3px;text-align:center;font:900 8px/1 system-ui,sans-serif;letter-spacing:.08em;color:#8d8778;pointer-events:none;text-shadow:0 1px 2px #000}
body #gameShell .topbar .save-panel>.top-vip-button.ativo>.vip-top-rotulo{color:#f3cf7a}
body #gameShell .topbar .save-panel>.top-vip-button:not(.ativo)>.col-icone{filter:grayscale(1) brightness(.75);opacity:.7}
body #gameShell .topbar .save-panel>.top-vip-button.ativo{border-color:#f3cf7a!important;box-shadow:0 0 10px rgba(243,207,122,.45)!important}
body #gameShell .topbar .save-panel>.top-vip-button>.vip-top-dias{position:absolute;top:-6px;right:-8px;margin:0;font:800 9.5px/1.35 system-ui,sans-serif;font-style:normal;letter-spacing:0;color:#0d1a0d;background:#5ee07a;border:1px solid #1b150c;border-radius:8px;padding:0 4px;pointer-events:none}
body #gameShell .topbar .save-panel>.top-vip-button>.vip-top-dias.hidden{display:none}
@media (max-width:420px){
  body #gameShell .game-brand-logo{width:86px;height:33px}
  body #gameShell .topbar .save-panel{gap:5px!important}
  body #gameShell .topbar .save-panel>.online-nuvem{margin-left:0!important;font-size:12px}
  body #gameShell .topbar .save-panel>.topbar-button,
  body #gameShell .topbar .conta-wrap>.conta-menu-button{width:32px!important;height:32px!important}
  body #gameShell .topbar .save-panel>.topbar-button>.col-icone,
  body #gameShell .topbar .conta-wrap>.conta-menu-button>.col-icone{font-size:16px}
  body #gameShell .topbar .save-panel>.top-vip-button>.col-icone,
  body #gameShell .topbar .save-panel>.top-vip-button>.col-icone img{width:24px!important;height:24px!important}
  body #gameShell .topbar .save-panel>.top-vip-button>.col-icone{transform:translateY(-3px)}
  body #gameShell .topbar .save-panel>.top-vip-button>.vip-top-rotulo{bottom:2px;font-size:7px}
}
/* Celulares de 320 px (os menores): sem isto o CONTA passava da borda com a coroa VIP. */
@media (max-width:340px){
  body #gameShell .game-brand-logo{width:66px;height:25px}
  body #gameShell .topbar .save-panel{gap:3px!important}
  body #gameShell .topbar .save-panel>.online-nuvem{font-size:11px}
  body #gameShell .topbar .save-panel>.topbar-button,
  body #gameShell .topbar .conta-wrap>.conta-menu-button{width:30px!important;height:30px!important}
  body #gameShell .topbar .save-panel>.top-vip-button>.col-icone,
  body #gameShell .topbar .save-panel>.top-vip-button>.col-icone img{width:22px!important;height:22px!important}
}

/* O quadrinho VIP DA CONTA do cabeçalho da Loja agora leva à aba VIP. */
#storeView .vip-store-status[data-loja-ir]{cursor:pointer}
#storeView .vip-store-status[data-loja-ir]:hover{border-color:#b98f43}
.loja-trilho-coroa{font-style:normal;font-size:.9em;margin-left:2px}
.loja-trilho-coroa img{width:24px;height:24px;vertical-align:-7px;object-fit:contain}

/* Atalho no fim dos Destaques (antes era a faixa comprida com o texto repetido). */
.vip-conta-atalho{width:100%;text-align:left;cursor:pointer;font:inherit;color:inherit}
.vip-conta-atalho small{color:#d8b4fe;font-weight:800}
.vip-conta-atalho:hover{border-color:#a78bfa}

/* ---- Aba VIP ---- */
.vip-aba{display:grid;gap:14px;margin-top:10px}
@media (min-width:900px){.vip-aba{grid-template-columns:1fr 1fr;align-items:start}}
.vip-aba-cartao{min-width:0;display:grid;gap:10px;padding:16px;border:1px solid #5a4526;border-radius:12px;background:linear-gradient(180deg,#1d160c,#120e08)}
.vip-aba-nivel{border-color:#6d3fc0;background:linear-gradient(180deg,#1f1633,#120d1f)}
.vip-aba-cartao h3{margin:0;color:#f3e2b3;font-family:Georgia,"Times New Roman",serif;font-size:calc(19px * var(--text-scale,1));line-height:1.25;overflow-wrap:anywhere}
.vip-aba-rotulo{font-weight:800;font-size:calc(11px * var(--text-scale,1));letter-spacing:.14em;text-transform:uppercase;color:#c9a55a}
.vip-aba-nivel .vip-aba-rotulo{color:#b99af2}
.vip-aba-status{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.vip-aba-status b{color:#efe6cf;font-size:calc(15px * var(--text-scale,1))}
.vip-aba-selo{font-weight:900;font-size:calc(12px * var(--text-scale,1));letter-spacing:.1em;padding:5px 10px;border-radius:20px;background:#3a3428;color:#cfc4a8}
.vip-aba-selo.ativo{background:#1f5a2c;color:#b9f5c6;box-shadow:0 0 0 1px #3fa45a inset}
.vip-aba-barra{height:8px;border-radius:6px;background:#2b2418;overflow:hidden}
.vip-aba-barra i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#e7b44d,#fff0b3)}
.vip-aba-nivel .vip-aba-barra{background:#2a1f44}
.vip-aba-nivel .vip-aba-barra i{background:linear-gradient(90deg,#8b5cf6,#d8b4fe)}
.vip-aba-lista{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.vip-aba-lista li{display:flex;gap:8px;align-items:baseline;color:#e7dcc2;font-size:calc(14px * var(--text-scale,1));line-height:1.35}
.vip-aba-lista li::before{content:"✦";color:#e2b24f;font-size:11px;flex:0 0 auto}
.vip-aba-nivel .vip-aba-lista li::before{color:#b99af2}
.vip-aba-nota{margin:0;color:#a99d82;font-size:calc(12.5px * var(--text-scale,1));line-height:1.45}
.vip-aba-nivel .vip-aba-nota{color:#b8a9d6}
.vip-aba-nota .vip-prestige-line{color:#e9d5ff}
.vip-aba-proximo{padding-top:8px;border-top:1px solid rgba(185,154,242,.2)}
.vip-aba-acoes{display:flex;gap:8px;flex-wrap:wrap}
.vip-aba-acoes>button{flex:1 1 140px;min-height:40px}
.vip-aba-ativar{border-radius:7px;border:1px solid #c084fc;background:linear-gradient(135deg,#9333ea,#7c3aed);color:#fff;font-weight:900;font-size:calc(13px * var(--text-scale,1));letter-spacing:.04em;cursor:pointer;padding:8px 12px}
.vip-aba-ativar:disabled{opacity:.45;cursor:default}
.vip-aba-falta{color:#b8a984;font-size:calc(12.5px * var(--text-scale,1))}

/* PC: a navegação do topo sobe para a faixa do logo e reservava só 216 px à direita, de antes da
   nuvem (☁️ hora) existir. Com a nuvem e a coroa, os atalhos da direita ocupam ~300 px e o MAIS
   ficava por baixo da hora entre 1181 e ~1370 px. A reserva passa a 310 px e, na faixa apertada,
   os botões da navegação ficam um pouco mais juntos (medido em 1181, 1200, 1280 e 1366 px). */
@media (min-width:1181px){
  body #gameShell>.main-nav{margin-right:310px!important}
}
@media (min-width:1181px) and (max-width:1380px){
  body #gameShell>.main-nav>.nav-button,
  body #gameShell>.main-nav>.nav-more-wrap>.nav-button{padding:0 6px!important;gap:5px!important;letter-spacing:.04em!important}
}

/* Selo VIP ao lado do nome no chat (pedido do autor, 30/09): o mesmo da coroa do topo, em
   miniatura e só dourado (só aparece com VIP ativo). Altura menor que a linha do nome, para
   não empurrar nem cobrir nada; não encolhe e não quebra. */
.col-chat-msg-head .col-chat-vip{display:inline-flex;align-items:center;gap:2px;flex:0 0 auto;margin-left:5px;padding:0 5px 0 1px;height:15px;vertical-align:-3px;border:1px solid rgba(243,207,122,.65);border-radius:8px;background:linear-gradient(180deg,#2e2410,#17120a);white-space:nowrap;line-height:1}
.col-chat-msg-head .col-chat-vip>.col-icone{display:inline-grid;place-items:center;width:14px;height:14px;font-size:10px;font-style:normal}
.col-chat-msg-head .col-chat-vip>.col-icone img{width:14px;height:14px;object-fit:contain}
.col-chat-msg-head .col-chat-vip>b{color:#f3cf7a;font:900 8px/1 system-ui,sans-serif;letter-spacing:.08em}