/* =====================================================================
   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:var(--cur-mao,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:var(--cur-mao,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:var(--cur-mao,pointer);padding:8px 12px}
.vip-aba-ativar:disabled{opacity:.45;cursor:var(--cur-seta,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:var(--topo-direita,310px)!important}
}
/* 06/10 (print do autor, ~1560 px no Windows): a nuvem "☁️ hora" ficava em cima do MAIS. A reserva
   acima agora é a largura REAL dos atalhos (src/ui/topo-cabe.js grava --topo-direita) e, se os botões
   ainda não cabem, o mesmo script liga as etapas abaixo, uma de cada vez. */
@media (min-width:1181px){
  body #gameShell.topo-aperto-1>.main-nav>.nav-button,
  body #gameShell.topo-aperto-1>.main-nav>.nav-more-wrap>.nav-button{padding:0 6px!important;gap:5px!important;letter-spacing:.04em!important}
  body #gameShell.topo-aperto-2>.main-nav>.nav-button,
  body #gameShell.topo-aperto-2>.main-nav>.nav-more-wrap>.nav-button{font-size:calc(10.5px * var(--text-scale,1))!important;letter-spacing:.02em!important;padding:0 5px!important}
  body #gameShell.topo-aperto-3>.main-nav>.nav-button>span:not(.nav-novidade){display:none!important}
  body #gameShell.topo-aperto-3>.main-nav>.nav-button{padding:0 9px!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}
/* Selo FUNDADOR no chat (0201): quem comprou o Título Fundador. Ao lado do VIP, mesma altura. */
.col-chat-msg-head .col-chat-fundador{display:inline-flex;align-items:center;flex:0 0 auto;margin-left:5px;padding:0 5px;height:15px;vertical-align:-3px;border:1px solid rgba(147,197,253,.7);border-radius:8px;background:linear-gradient(180deg,#132339,#0a1322);white-space:nowrap;line-height:1}
.col-chat-msg-head .col-chat-fundador>b{color:#bfdbfe;font:900 8px/1 system-ui,sans-serif;letter-spacing:.08em}
/* Parceiro criador (2471): nome verde e selinho de vídeo, discretos. */
#colChatPanel .col-chat-autor.col-chat-parceiro-nome,.col-chat-msg-head .col-chat-parceiro-nome{color:#6ee7a0!important;background:none!important;-webkit-text-fill-color:#6ee7a0!important;text-shadow:0 0 6px rgba(52,211,153,.35)}
.col-chat-msg-head .col-chat-parceiro{position:relative;display:inline-block;flex:0 0 auto;width:17px;height:12px;margin-left:5px;vertical-align:-1px;border-radius:3px;background:#e62117;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.col-chat-msg-head .col-chat-parceiro::after{content:"";position:absolute;left:6.5px;top:3px;border-style:solid;border-width:3px 0 3px 5px;border-color:transparent transparent transparent #fff}
/* Cartão do VIP permanente (06/10): arte real das asas, próximo nível em destaque e botão de Jewel of Dark. */
.vip-nv{position:relative;overflow:hidden;border-color:#8b5cf6;background:radial-gradient(120% 70% at 85% 0%,rgba(139,92,246,.28),transparent 60%),linear-gradient(180deg,#22173a,#120d1f);box-shadow:0 0 0 1px rgba(216,180,254,.08) inset,0 8px 28px rgba(76,29,149,.25)}
.vip-nv-topo{display:flex;align-items:center;gap:12px;min-width:0}
.vip-nv-topo>div{min-width:0}
.vip-nv-num{flex:0 0 auto;display:grid;place-items:center;width:58px;height:58px;border-radius:14px;background:linear-gradient(160deg,#a78bfa,#6d28d9 55%,#3b0764);box-shadow:0 0 0 2px #d8b4fe inset,0 0 18px rgba(167,139,250,.45);color:#fff;line-height:1}
.vip-nv-num small{font-size:calc(10px * var(--text-scale,1));font-weight:900;letter-spacing:.14em;opacity:.85}
.vip-nv-num b{font-family:Georgia,"Times New Roman",serif;font-size:calc(26px * var(--text-scale,1))}
.vip-nv-sub{display:block;margin-top:3px;color:#b8a9d6;font-size:calc(12px * var(--text-scale,1));line-height:1.35}
.vip-nv-mini{display:block;font-weight:800;font-size:calc(10.5px * var(--text-scale,1));letter-spacing:.12em;text-transform:uppercase;color:#c4b5fd}
.vip-nv-prox{margin:0;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;padding:8px 10px;border-radius:9px;background:rgba(139,92,246,.14);border:1px solid rgba(196,181,253,.25);color:#efe7ff;font-size:calc(13px * var(--text-scale,1));line-height:1.35}
.vip-nv-prox-tag{font-weight:900;color:#fde68a;white-space:nowrap}
.vip-nv-atual{display:grid;gap:6px}
.vip-nv-evolucao{display:grid;gap:6px}
.vip-nv .vip-nv-evolucao .vip-aba-barra{height:14px;border-radius:8px;background:#1a1130;box-shadow:0 0 0 1px rgba(196,181,253,.35) inset}
.vip-nv .vip-nv-evolucao .vip-aba-barra i{min-width:6px;border-radius:8px;background:linear-gradient(90deg,#7c3aed,#c084fc 60%,#fde68a);box-shadow:0 0 10px rgba(192,132,252,.6)}
.vip-nv .vip-nv-evolucao .vip-aba-nota{color:#e9dcff;font-weight:600}
.vip-nv-cta{width:100%;min-height:42px}
.vip-nv-cta:hover{filter:brightness(1.12)}
/* O prêmio grande (opção A do autor) */
.vip-nv-vitrine{position:relative;display:grid;justify-items:center;gap:4px;padding:6px 8px 10px;border-radius:12px;background:radial-gradient(60% 70% at 50% 40%,rgba(253,230,138,.18),transparent 70%),rgba(10,6,20,.45);border:1px solid rgba(253,230,138,.22);text-align:center}
.vip-nv-asa-grande{width:min(260px,70%);aspect-ratio:1;object-fit:contain;margin:-14px 0 -26px;filter:drop-shadow(0 0 14px rgba(253,230,138,.35))}
.vip-nv-titulo-arte{width:min(280px,82%);height:auto}
.vip-nv-vitrine-txt{display:grid;gap:2px}
.vip-nv-vitrine-txt b{color:#f3e2b3;font-size:calc(14px * var(--text-scale,1));overflow-wrap:anywhere}
.vip-nv-vitrine-txt small{color:#fde68a;font-size:calc(12.5px * var(--text-scale,1))}
@media (max-width:899px){.vip-nv-asa-grande{width:min(190px,58%);margin:-10px 0 -18px}.vip-nv-titulo-arte{width:min(240px,78%)}}
/* 1905 (17/10): o que o próximo nível traz de novo e a escada inteira (O que cada nível dá). */
.vip-nv-novo{display:inline-block;padding:1px 8px;border-radius:999px;background:rgba(253,230,138,.16);border:1px solid rgba(253,230,138,.35);color:#fde68a;font-weight:700;font-size:calc(12px * var(--text-scale,1));overflow-wrap:anywhere}
.vip-nv-escada{border-radius:10px;background:rgba(10,6,20,.45);border:1px solid rgba(196,181,253,.22);color:#efe7ff}
.vip-nv-escada>summary{cursor:var(--cur-mao,pointer);padding:9px 12px;font-weight:800;color:#e9dcff;font-size:calc(13px * var(--text-scale,1))}
.vip-nv-escada ol{list-style:none;margin:0;padding:0 8px 8px;display:grid;gap:4px;max-height:360px;overflow-y:auto}
.vip-nv-escada li{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 8px;padding:6px 8px;border-radius:8px;background:rgba(139,92,246,.08);font-size:calc(12px * var(--text-scale,1));line-height:1.3;min-width:0}
.vip-nv-escada li b{color:#fde68a;min-width:52px}
.vip-nv-escada li small{color:#b8a9d6}
.vip-nv-escada li span{flex:1 1 100%;color:#efe7ff;overflow-wrap:anywhere}
.vip-nv-escada li em{font-style:normal;padding:1px 7px;border-radius:999px;background:rgba(253,230,138,.14);color:#fde68a;font-weight:700;overflow-wrap:anywhere}
.vip-nv-escada li.feito{opacity:.6}
.vip-nv-escada li.atual{outline:1px solid #c084fc;background:rgba(139,92,246,.22)}

/* 23/10 (autor: "tem icones mal centralizados nos menus ali e tem uns pequenos demais, quase nao se ve no
   circulozinho deles"): o responsivo.css travava o ícone em 16 px e o padding empurrava para o canto.
   Agora o ícone ocupa ~70% do círculo e fica no centro exato (o nome e o número seguem por cima, soltos). */
body #gameShell .topbar .save-panel>.topbar-button:not(.top-vip-button),
body #gameShell .topbar .conta-wrap>.conta-menu-button{padding:0!important;gap:0!important;justify-content:center!important;align-items:center!important}
body #gameShell .topbar .save-panel>.topbar-button:not(.top-vip-button)>.col-icone,
body #gameShell .topbar .save-panel>.topbar-button:not(.top-vip-button)>.col-icone img,
body #gameShell .topbar .conta-wrap>.conta-menu-button>.col-icone,
body #gameShell .topbar .conta-wrap>.conta-menu-button>.col-icone img{width:28px!important;height:28px!important}
body #gameShell .topbar .save-panel>.topbar-button:not(.top-vip-button)>.col-icone,
body #gameShell .topbar .conta-wrap>.conta-menu-button>.col-icone{font-size:20px!important}
@media (max-width:420px){
  body #gameShell .topbar .save-panel>.topbar-button:not(.top-vip-button)>.col-icone,
  body #gameShell .topbar .save-panel>.topbar-button:not(.top-vip-button)>.col-icone img,
  body #gameShell .topbar .conta-wrap>.conta-menu-button>.col-icone,
  body #gameShell .topbar .conta-wrap>.conta-menu-button>.col-icone img{width:24px!important;height:24px!important}
  body #gameShell .topbar .save-panel>.topbar-button:not(.top-vip-button)>.col-icone,
  body #gameShell .topbar .conta-wrap>.conta-menu-button>.col-icone{font-size:17px!important}
}
@media (max-width:380px){
  body #gameShell .topbar .save-panel>.topbar-button:not(.top-vip-button)>.col-icone,
  body #gameShell .topbar .save-panel>.topbar-button:not(.top-vip-button)>.col-icone img,
  body #gameShell .topbar .conta-wrap>.conta-menu-button>.col-icone,
  body #gameShell .topbar .conta-wrap>.conta-menu-button>.col-icone img{width:22px!important;height:22px!important}
}

/* EMBLEMA DO VIP COM NÚMERO E COR (24/10, src/ui/vip-emblema.js). Escudo com a arte do Emblema VIP e o número
   do VIP permanente. Faixas: Bronze 1-4, Prata 5-9, Ouro 10-14, Platina 15-19 (pérola), Lendário 20-25
   (arco-íris do Primordial, styles/primordial.css). Para quem pede menos movimento, tudo parado. */
.col-vip-em{--c1:#f0b27a;--c2:#8a4f24;--c3:#3a2312;--brilho:rgba(240,160,100,.35);display:inline-flex;align-items:center;gap:2px;flex:0 0 auto;height:calc(15px*var(--text-scale,1));padding:0 calc(5px*var(--text-scale,1)) 0 1px;border-radius:4px 4px 8px 8px;border:1px solid var(--c2);background:linear-gradient(180deg,var(--c3),#0d0a10);box-shadow:0 0 7px var(--brilho);white-space:nowrap;line-height:1;vertical-align:-3px;box-sizing:border-box}
.col-vip-em>img{width:calc(13px*var(--text-scale,1));height:calc(13px*var(--text-scale,1));object-fit:contain;flex:0 0 auto}
.col-vip-em>b{font:900 calc(8.5px*var(--text-scale,1))/1 system-ui,sans-serif;letter-spacing:.04em;color:var(--c1)}
.col-vip-em.t-prata{--c1:#f2f5fa;--c2:#8d97a8;--c3:#2b313b;--brilho:rgba(220,230,245,.35)}
.col-vip-em.t-ouro{--c1:#ffe08a;--c2:#b8860b;--c3:#3d2b06;--brilho:rgba(255,210,90,.45)}
.col-vip-em.t-platina{--c1:#fbf8f1;--c2:#e9e2d2;--c3:#323846;--brilho:rgba(225,235,255,.5)}
.col-vip-em.t-platina>b{text-shadow:0 0 6px rgba(225,235,255,.8)}
.col-vip-em.t-lenda{--c1:#fbf8f1;--brilho:rgba(255,245,225,.45);border-color:transparent;background:linear-gradient(180deg,#2a2832,#0d0a10) padding-box,linear-gradient(90deg,#ffd6e8,#fff1c2,#d2ffe6,#cfe9ff,#e6d6ff,#ffd6e8) border-box;background-size:100% 100%,300% 100%;animation:col-vip-em-arco 6s linear infinite}
.col-vip-em.t-lenda>b{background:linear-gradient(90deg,#fbf8f1,#ffd6e8,#fff1c2,#d2ffe6,#cfe9ff,#e6d6ff,#fbf8f1);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:col-vip-em-arco 6s linear infinite}
@keyframes col-vip-em-arco{from{background-position:0% 50%}to{background-position:300% 50%}}
.col-vip-em.grande{height:calc(26px*var(--text-scale,1));padding:0 calc(9px*var(--text-scale,1)) 0 2px;border-radius:6px 6px 12px 12px}
.col-vip-em.grande>img{width:calc(22px*var(--text-scale,1));height:calc(22px*var(--text-scale,1))}
.col-vip-em.grande>b{font-size:calc(13px*var(--text-scale,1))}
/* no chat: antes do nome, como na prévia aprovada */
.col-chat-msg-head .col-vip-em{margin-right:4px}
/* nos rankings e no duelo: ao lado do nome */
.col-vip-em-lado{margin-left:5px}
@media (prefers-reduced-motion:reduce){.col-vip-em.t-lenda,.col-vip-em.t-lenda>b{animation:none}}
/* A TRILHA DAS FAIXAS na tela do VIP (24/10, game.js vipTrilhaHtml): emblema de verdade + asa do patamar. */
.vip-trilha{display:grid;gap:8px;border-radius:10px;background:rgba(10,6,20,.45);border:1px solid rgba(196,181,253,.22);padding:10px}
.vip-trilha-faixas{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.vip-trilha-faixa{position:relative;display:grid;justify-items:center;align-content:end;gap:5px;min-width:0;min-height:calc(96px*var(--text-scale,1));padding:8px 4px;border-radius:10px;border:1px solid rgba(196,181,253,.22);background:rgba(139,92,246,.08);color:#efe7ff;cursor:var(--cur-mao,pointer);font:inherit}
.vip-trilha-faixa>span{position:relative;text-shadow:0 1px 3px #000,0 0 6px #000;font-weight:800;font-size:calc(12px*var(--text-scale,1));text-align:center;word-break:keep-all}
.vip-trilha-faixa>small{position:relative;text-shadow:0 1px 2px #000;font-size:calc(10px*var(--text-scale,1));color:#b8a9d6;white-space:nowrap}
.vip-trilha-faixa>.col-vip-em{position:relative;z-index:1;width:calc(36px*var(--text-scale,1));height:calc(36px*var(--text-scale,1));padding:0;justify-content:center;border-radius:8px 8px 18px 18px;border-width:2px}
.vip-trilha-faixa>.col-vip-em>img{width:calc(28px*var(--text-scale,1));height:calc(28px*var(--text-scale,1))}
.vip-trilha-faixa>.col-vip-em>b{display:none}
.vip-trilha-asa{position:absolute;left:0;top:0;width:100%;height:66%;object-fit:contain;opacity:.85;pointer-events:none;filter:drop-shadow(0 0 6px rgba(0,0,0,.6))}
.vip-trilha-faixa[aria-pressed="true"]{border-color:#fde68a;background:rgba(253,230,138,.10);box-shadow:0 0 0 1px #fde68a inset}
.vip-trilha-faixa.feita{opacity:.7}
.vip-trilha-faixa:focus-visible{outline:2px solid #fde68a;outline-offset:2px}
.vip-trilha-painel{display:grid;gap:6px;border-radius:8px;background:rgba(139,92,246,.08);padding:8px 10px}
.vip-trilha-painel[hidden]{display:none}
.vip-trilha-painel h4{margin:0;font-size:calc(13px*var(--text-scale,1));color:#fde68a;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.vip-trilha-painel ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.vip-trilha-painel li{display:flex;flex-wrap:wrap;gap:3px 8px;align-items:baseline;font-size:calc(12px*var(--text-scale,1));line-height:1.3;min-width:0}
.vip-trilha-painel li b{color:#fde68a;min-width:52px}
.vip-trilha-painel li span{flex:1 1 0;min-width:0;display:flex;flex-wrap:wrap;gap:3px}
.vip-trilha-painel li em{font-style:normal;padding:1px 7px;border-radius:999px;background:rgba(253,230,138,.14);color:#fde68a;font-weight:700;overflow-wrap:anywhere}
.vip-trilha-painel li.feito em{opacity:.65}
.vip-trilha-painel>small{color:#b8a9d6;font-size:calc(11px*var(--text-scale,1))}
.vip-trilha-voce{font-size:calc(10px*var(--text-scale,1));background:#fde68a;color:#2a1d05;border-radius:99px;padding:1px 7px;font-weight:900}
@media (max-width:520px){.vip-trilha-faixas{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* no painel do chat a letra do cabeçalho (11,5px, chat-expandido.css) não pode vencer a do emblema */
#colChatPanel .col-chat-msg-head .col-vip-em{height:calc(15px*var(--text-scale,1))}
#colChatPanel .col-chat-msg-head .col-vip-em>b{font-size:calc(8.5px*var(--text-scale,1));line-height:1}
/* 2038 (28/10): O PODER DAS ASAS DO VIP (game.js vipAsasPoderHtml) */
.vip-asas-poder{display:grid;gap:8px;padding:10px 12px;border:1px solid rgba(253,230,138,.35);border-radius:12px;background:linear-gradient(160deg,rgba(60,30,90,.7),rgba(16,10,28,.85));color:#f3e6c8;min-width:0}
.vip-asas-poder .va-topo{display:flex;align-items:center;gap:8px;min-width:0}
.vip-asas-poder .va-topo img{width:24px;height:24px;object-fit:contain;flex:none}
.vip-asas-poder .va-topo b{font-size:calc(14px * var(--text-scale,1));letter-spacing:.06em;color:#f2c66d;text-transform:uppercase;min-width:0;overflow-wrap:anywhere}
.vip-asas-poder .va-topo small{margin-left:auto;font-size:calc(11px * var(--text-scale,1));color:#d8b4fe;white-space:nowrap}
.vip-asas-poder .va-lista{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.vip-asas-poder .va-asa{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:10px;background:rgba(10,6,20,.45);border:1px solid rgba(255,255,255,.06);opacity:.6;min-width:0}
.vip-asas-poder .va-asa.tem{opacity:1;border-color:rgba(253,230,138,.3)}
.vip-asas-poder .va-arte{width:56px;height:40px;object-fit:contain;flex:none}
.vip-asas-poder .va-txt{display:grid;gap:2px;flex:1;min-width:0}
.vip-asas-poder .va-txt b{color:#f3e2b3;font-size:calc(13px * var(--text-scale,1));overflow-wrap:anywhere}
.vip-asas-poder .va-txt small{color:#c4b5fd;font-size:calc(11.5px * var(--text-scale,1))}
.vip-asas-poder .va-bonus{display:flex;flex-wrap:wrap;gap:4px 6px}
.vip-asas-poder .va-bonus span{font-size:calc(12px * var(--text-scale,1));color:#9df29d;font-weight:700;overflow-wrap:anywhere}
.vip-asas-poder .va-selo{width:16px;height:16px;object-fit:contain;flex:none}
.vip-asas-poder .va-agora{display:grid;gap:4px;padding:6px 10px;border-radius:10px;background:rgba(242,198,109,.12);font-size:calc(12.5px * var(--text-scale,1))}
.vip-asas-poder .va-agora>span{color:#f2c66d;font-weight:700}
.vip-asas-poder .va-como{font-size:calc(12px * var(--text-scale,1));color:#c9bde0}
.vip-asas-poder .va-como summary{cursor:var(--cur-mao,pointer);color:#d8b4fe;font-weight:700}
.vip-asas-poder .va-como p{margin:4px 0 0;line-height:1.4}
/* VIP em degraus (01/11, SQL 2524): os 3 degraus no cartão do Emblema, o atual em destaque. */
.vip-degraus{margin-top:10px;border:1px solid rgba(226,178,79,.35);border-radius:10px;padding:8px 10px;background:rgba(0,0,0,.22)}
.vip-degraus-tit{color:#e2b24f;font-weight:800;font-size:calc(12.5px * var(--text-scale,1));letter-spacing:.3px;margin-bottom:6px}
.vip-degraus ol{margin:0;padding:0;list-style:none;display:grid;gap:5px}
.vip-degraus li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;padding:5px 8px;border-radius:8px;color:#cfc3a6;font-size:calc(13px * var(--text-scale,1));line-height:1.35;min-width:0}
.vip-degraus li b{color:#f3e6c8}
.vip-degraus li small{color:#a99d82;font-size:calc(11.5px * var(--text-scale,1))}
.vip-degraus li span{flex:1 1 100%;min-width:0;overflow-wrap:anywhere}
.vip-degraus li.ativo{background:rgba(226,178,79,.16);box-shadow:inset 0 0 0 1px rgba(226,178,79,.6)}
.vip-degraus li em{font-style:normal;font-weight:900;font-size:calc(10.5px * var(--text-scale,1));color:#2a1a04;background:#e2b24f;border-radius:999px;padding:1px 7px;order:-1;margin-left:auto}