/* =====================================================================
   COLUNA DA DIREITA EM GRUPOS — 04/10, opção A do autor
   ---------------------------------------------------------------------
   Quem monta: src/ui/painel-grupos.js (títulos, selos, cartão apagado).
   A ordem dos cartões continua sendo a do Editor; este arquivo só muda a
   cara: título por grupo, cartão mais baixo, selo verde de "dá para jogar",
   cartão de informação (Inventário raro, Farm) mais leve.
   Vem logo ANTES do combate-b.css (que tem de ser a última folha): onde os
   dois mexem na mesma coisa, o seletor daqui é mais forte.
   ===================================================================== */

/* O título do grupo: dourado, com um traço que some para a direita. */
#gameShell .battle-right-rail>.rail-grupo-titulo{
  display:flex;align-items:center;gap:8px;margin:6px 2px -4px;
  font:900 calc(9px * var(--text-scale,1))/1.2 Arial,sans-serif;letter-spacing:2px;color:#d7a944;
}
#gameShell .battle-right-rail>.rail-grupo-titulo::after{
  content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(215,169,68,.35),transparent);
}
#gameShell .battle-right-rail>.rail-grupo-titulo[hidden]{display:none!important}

/* O cartão fica mais baixo: o título do grupo já diz o que o rótulo de cima dizia. */
#gameShell .battle-right-rail.rail-em-grupos>[data-rail-card]:not(#goldenDragonEventBanner){padding:9px 10px!important}
#gameShell .battle-right-rail.rail-em-grupos>[data-rail-card]:not(#goldenDragonEventBanner) .rail-toggle-copy small{display:none}

/* O selo: "4 ENTRADAS", "30 INGRESSOS". Verde = dá para jogar agora. */
#gameShell .battle-right-rail .rail-selo{
  flex:none;white-space:nowrap;padding:4px 7px;border-radius:999px;
  font:900 calc(9px * var(--text-scale,1))/1 Arial,sans-serif;letter-spacing:.6px;
  color:#6ee7a0;background:rgba(74,222,128,.14);border:1px solid rgba(74,222,128,.35);
}

/* Não dá para jogar agora (sem guilda, tentativas do dia gastas, trancado):
   o cartão apaga um pouco. O resumo de sempre diz o porquê. */
#gameShell .battle-right-rail>.rail-em-espera .rail-toggle-icon{filter:grayscale(.8);opacity:.6}
#gameShell .battle-right-rail>.rail-em-espera .rail-toggle-copy strong{color:#a7adba!important}

/* Só informação (Inventário raro, Farm): cartão leve, borda tracejada. */
#gameShell .battle-right-rail>[data-rail-card].rail-cartao-leve{
  background:rgba(255,255,255,.015)!important;border-style:dashed!important;box-shadow:none!important;
}

/* Celular estreito: o selo não pode empurrar o nome para fora. */
@media (max-width:420px){
  #gameShell .battle-right-rail .rail-selo{padding:3px 6px;letter-spacing:.3px}
}

/* Guilda e Amigos e Colosseum levam para outra tela: a seta é "›", e não a
   de abrir/fechar (que gira quando o cartão não está "collapsed"). */
#gameShell .battle-right-rail>[data-rail-card="social"] .rail-toggle-chevron,
#gameShell .battle-right-rail>[data-rail-card="coliseu"] .rail-toggle-chevron,
#gameShell .battle-right-rail>[data-rail-card="ilha"] .rail-toggle-chevron{transform:none!important}

/* Coluna estreita (PC de 1366, texto grande): o selo ao lado esmagava o nome
   ("Colosseum / of / Legends"). Nela, o selo vira uma etiqueta presa na borda
   de cima do cartão, e o nome fica com a linha inteira. */
#gameShell .battle-right-rail.rail-em-grupos>[data-rail-card]:not(#goldenDragonEventBanner){container-type:inline-size;position:relative}
/* Os cartões com selo cortavam a etiqueta (overflow:hidden de style.css). Eles são só um botão. */
#gameShell .battle-right-rail.rail-em-grupos>:is([data-rail-card="blood-castle"],[data-rail-card="dungeon"],[data-rail-card="guild-boss"],[data-rail-card="coliseu"],[data-rail-card="ilha"]){overflow:visible!important}
@container (max-width:300px){
  #gameShell .battle-right-rail .rail-selo{
    position:absolute;top:-8px;right:24px;padding:2px 6px;letter-spacing:.4px;
    font-size:calc(8px * var(--text-scale,1));background:#0f1a12;
  }
}

/* =====================================================================
   PRONTO AGORA / MAIS TARDE — 05/10, opção C do autor
   Quem separa: src/ui/painel-grupos.js (classes rail-pronto e rail-mais-tarde).
   ===================================================================== */
#gameShell .battle-right-rail>.rail-grupo-titulo[data-grupo="jogar"]{color:#6ee7a0}
#gameShell .battle-right-rail>.rail-grupo-titulo[data-grupo="jogar"]::after{background:linear-gradient(90deg,rgba(110,231,160,.35),transparent)}
/* 29/10: PVP · PRONTO AGORA em tom de brasa, para não confundir com o verde do PvE. */
#gameShell .battle-right-rail>.rail-grupo-titulo[data-grupo="pvp"]{color:#ff9a7a}
#gameShell .battle-right-rail>.rail-grupo-titulo[data-grupo="pvp"]::after{background:linear-gradient(90deg,rgba(255,154,122,.35),transparent)}
#gameShell .battle-right-rail>.rail-grupo-titulo[data-grupo="tarde"]{color:#9aa3b5}
#gameShell .battle-right-rail>.rail-grupo-titulo[data-grupo="tarde"]::after{background:linear-gradient(90deg,rgba(154,163,181,.3),transparent)}

/* Pronto agora: destaque verde e ícone maior. */
#gameShell .battle-right-rail.rail-em-grupos>[data-rail-card].rail-pronto:has(.rail-selo){
  border-color:rgba(74,222,128,.4)!important;
  background:linear-gradient(90deg,rgba(74,222,128,.08),rgba(255,255,255,.02))!important;
  padding:12px 10px!important;
}
#gameShell .battle-right-rail>[data-rail-card].rail-pronto:has(.rail-selo) .rail-toggle-icon{width:40px;height:40px}

/* Mais tarde: linha fina, nome à esquerda e o motivo à direita. */
#gameShell .battle-right-rail.rail-em-grupos>[data-rail-card].rail-mais-tarde{
  padding:5px 8px!important;background:rgba(255,255,255,.015)!important;box-shadow:none!important;
}
#gameShell .battle-right-rail>[data-rail-card].rail-mais-tarde .rail-toggle-icon{width:24px;height:24px;font-size:calc(12px * var(--text-scale,1))}
#gameShell .battle-right-rail>[data-rail-card].rail-mais-tarde .rail-toggle-copy{flex-direction:row;align-items:center;gap:8px}
#gameShell .battle-right-rail>[data-rail-card].rail-mais-tarde .rail-toggle-copy strong{
  flex:1;min-width:0;font-size:calc(12px * var(--text-scale,1));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#gameShell .battle-right-rail>[data-rail-card].rail-mais-tarde .rail-toggle-copy em{
  flex:0 1 auto;max-width:52%;text-align:right;white-space:normal;line-height:1.2;color:#c9a35a;
}

/* =====================================================================
   VER MAIS — 27/10, opção A do autor ("muitos menus... deixar um: ver mais")
   Quem esconde: src/ui/painel-grupos.js (aplicarVerMais). Ficam os 3 primeiros
   de PVE e os 2 de PVP (29/10); o resto e o MAIS TARDE ficam atrás do botão dourado.
   Os mini ícones ficam lado a lado, sem sobrepor (pedido do autor na prévia).
   ===================================================================== */
#gameShell .battle-right-rail>.rail-vermais-oculto{display:none!important}
#gameShell .battle-right-rail>.rail-ver-mais{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 8px;width:100%;margin:0;padding:9px 10px;cursor:var(--cur-mao,pointer);
  border-radius:12px;border:1px solid rgba(215,169,68,.45);background:linear-gradient(180deg,rgba(215,169,68,.14),rgba(215,169,68,.04));
  color:#f1cf7e;font:900 calc(11px * var(--text-scale,1))/1.2 Arial,sans-serif;letter-spacing:1.2px;text-transform:uppercase;
}
#gameShell .battle-right-rail>.rail-ver-mais:hover{border-color:rgba(241,207,126,.75);background:linear-gradient(180deg,rgba(215,169,68,.22),rgba(215,169,68,.07))}
#gameShell .battle-right-rail>.rail-ver-mais:focus-visible{outline:2px solid #f1cf7e;outline-offset:2px}
#gameShell .battle-right-rail>.rail-ver-mais .rail-ver-mais-rotulo{white-space:nowrap}
#gameShell .battle-right-rail>.rail-ver-mais .rail-ver-mais-icones{display:inline-flex;align-items:center;gap:4px}
#gameShell .battle-right-rail>.rail-ver-mais .rail-ver-mais-icones img{width:20px;height:20px;flex:0 0 20px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))}
#gameShell .battle-right-rail>.rail-ver-mais .rail-ver-mais-seta{font-size:calc(13px * var(--text-scale,1));line-height:1}