/* ==========================================================================
   CARTÃO DO GOLDEN — opção A "Medalhão"
   O autor escolheu a A em 30/09 ("o menu do gold dragon é amador e confuso"),
   mas ela ficou num ramo que nunca subiu (claude/project-thread-1vwc7g). Em
   03/10 ele pediu de novo ("o painel que abre quando ele vem não contrasta com
   o padrão atual do game"): portada para a main no acabamento do Combate B
   (mesmo fundo e borda dos outros cartões da coluna, ouro só no que importa).
   - HTML: index.html #goldenDragonEventBanner; quem preenche é
     renderGoldenDragonEvent (game.js).
   - O medalhão é o rosto do Golden (pintarRostoGolden, o mesmo do atalho
     redondo da arena); o anel dourado em volta é o tempo que resta (--gd-tempo).
   - Carregada logo ANTES de combate-b.css (que é a última): os seletores com dois ids vencem
     os estilos antigos do banner (style.css, battle.css, ui-scale.css).
   - O atalho redondo dentro da arena (#goldenArenaButton) NÃO muda.
   ========================================================================== */

#gameShell #goldenDragonEventBanner.gd-cartao:not(.hidden){
  display:block!important;position:relative;overflow:hidden;
  padding:14px!important;border-radius:12px!important;
  border:1px solid var(--b-ouro-escuro,#6b5426)!important;
  background:
    radial-gradient(120% 70% at 0% 0%,rgba(243,207,122,.10),transparent 62%),
    var(--b-painel,linear-gradient(180deg,#17120b,#110e0a))!important;
  box-shadow:0 10px 26px rgba(0,0,0,.28),inset 0 1px 0 rgba(243,207,122,.10)!important;
}
/* fio dourado no alto, como a aba ativa do Combate B */
#gameShell #goldenDragonEventBanner.gd-cartao::before{content:"";position:absolute;left:14px;right:14px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--b-ouro,#f3cf7a),transparent);opacity:.7}
#goldenDragonEventBanner .gd-topo{display:flex;gap:12px;align-items:center}
#goldenDragonEventBanner .gd-medalhao{position:relative;flex:none;width:76px;height:76px;border-radius:50%;padding:4px;
  background:conic-gradient(var(--b-ouro,#f3cf7a) var(--gd-tempo,100%),rgba(243,207,122,.12) 0);box-shadow:0 0 14px rgba(243,207,122,.18)}
#goldenDragonEventBanner .gd-rosto{display:block;width:100%;height:100%;border-radius:50%;background:#2a1d06 no-repeat 50% 50%/cover;box-shadow:inset 0 0 0 2px #17120b}
/* A <img> guarda a arte do tier (alvo da Forja); quem mostra é o medalhão. */
#goldenDragonEventBanner .gd-arte-fonte{display:none!important}
#goldenDragonEventBanner .gd-tempo{position:absolute;left:50%;bottom:-7px;translate:-50% 0;padding:1px 8px;border-radius:99px;background:#110e0a;border:1px solid var(--b-ouro-2,#b8913f);
  color:var(--b-texto,#f1e2b8);font-size:calc(11px * var(--text-scale,1));font-style:normal;font-weight:900;line-height:1.4;white-space:nowrap;font-variant-numeric:tabular-nums}
#goldenDragonEventBanner .gd-titulo{min-width:0;display:flex;flex-direction:column}
#goldenDragonEventBanner .gd-rotulo{color:#7f879a;font-size:calc(9px * var(--text-scale,1));font-weight:900;letter-spacing:1.6px}
#goldenDragonEventBanner #goldenDragonEventName{margin:2px 0 5px;font-family:var(--font-display),Georgia,serif;font-size:calc(19px * var(--text-scale,1));font-weight:700;line-height:1.1;color:var(--b-ouro,#f3cf7a);overflow-wrap:anywhere}
#goldenDragonEventBanner .gd-pips{display:flex;flex-wrap:wrap;gap:4px;align-items:center;color:var(--b-texto-2,#b8a984);font-size:calc(10px * var(--text-scale,1));font-weight:800}
#goldenDragonEventBanner .gd-pips i{width:8px;height:8px;transform:rotate(45deg);background:#241c10;border:1px solid var(--b-borda,#3d311a)}
#goldenDragonEventBanner .gd-pips i.on{background:linear-gradient(135deg,#fff1b0,#d9a13a);border-color:#ffe08a;box-shadow:0 0 5px rgba(255,200,80,.5)}
#goldenDragonEventBanner .gd-pips span{margin-left:4px}
#goldenDragonEventBanner .gd-vida{margin-top:14px}
#goldenDragonEventBanner .gd-vida-rotulo{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 8px;margin-bottom:4px;color:#7f879a;font-size:calc(9.5px * var(--text-scale,1));font-weight:800;letter-spacing:1.2px}
#goldenDragonEventBanner .gd-vida-rotulo span{white-space:nowrap}
#goldenDragonEventBanner .gd-vida-rotulo strong{margin-left:auto;white-space:nowrap;color:var(--b-texto,#f1e2b8);font-variant-numeric:tabular-nums;letter-spacing:0}
#goldenDragonEventBanner .gd-trilho{position:relative;height:calc(14px * var(--text-scale,1));border-radius:99px;background:#0c0a07;border:1px solid var(--b-borda,#3d311a);overflow:hidden}
#goldenDragonEventBanner .gd-trilho i{position:absolute;inset:0 auto 0 0;display:block;background:linear-gradient(180deg,#ffe38a,#e0a02c 55%,#b8741a);box-shadow:0 0 10px rgba(255,190,60,.45);transition:width .25s ease}
#goldenDragonEventBanner .gd-trilho span{position:absolute;inset:0;display:grid;place-items:center;color:#fff8e0;font-size:calc(9.5px * var(--text-scale,1));font-weight:900;text-shadow:0 1px 2px #000,0 0 4px #000}
#goldenDragonEventBanner .gd-selos{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
#goldenDragonEventBanner .gd-selo{flex:1 1 auto;min-width:0;display:inline-flex;align-items:center;justify-content:center;padding:6px 8px;border-radius:8px;text-align:center;white-space:nowrap;
  background:rgba(255,255,255,.03);border:1px solid var(--b-borda,#3d311a);color:var(--b-texto-2,#b8a984);font-size:calc(10.5px * var(--text-scale,1));font-weight:800}
#goldenDragonEventBanner .gd-selo.ruim{background:rgba(220,60,50,.10);border-color:rgba(255,110,90,.40);color:#ffb3a8}
#goldenDragonEventBanner .gd-selo.bom{background:rgba(60,190,90,.10);border-color:rgba(110,230,140,.40);color:#b5f5c4}
/* 03/10 (regra do autor: nada de emoji genérico): o veredito ganha uma luz desenhada, verde ou vermelha. */
#goldenDragonEventBanner .gd-selo.bom::before,#goldenDragonEventBanner .gd-selo.ruim::before{content:"";display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;flex:none}
#goldenDragonEventBanner .gd-selo.bom::before{background:radial-gradient(circle at 35% 35%,#d8ffe0,#3fcf6a 60%,#1d7a3a);box-shadow:0 0 6px rgba(80,230,120,.8)}
#goldenDragonEventBanner .gd-selo.ruim::before{background:radial-gradient(circle at 35% 35%,#ffd6cf,#ff5a46 60%,#9a1c12);box-shadow:0 0 6px rgba(255,90,70,.8)}
#gameShell #goldenDragonEventBanner #goldenDragonFightButton{display:block!important;width:100%!important;margin:12px 0 0!important;padding:11px!important;border:0!important;border-radius:9px!important;
  color:var(--botao-ouro-texto)!important;background:var(--botao-ouro-fundo)!important;box-shadow:0 3px 0 #6b5426,0 8px 18px rgba(243,207,122,.16)!important;
  font-size:calc(12.5px * var(--text-scale,1))!important;font-weight:900!important;letter-spacing:1.4px!important;white-space:normal!important;cursor:var(--cur-mao,pointer)}
#gameShell #goldenDragonEventBanner #goldenDragonFightButton:hover{filter:brightness(1.07)}
#gameShell #goldenDragonEventBanner #goldenDragonFightButton:active{transform:translateY(2px);box-shadow:0 1px 0 #6b5426!important}
#gameShell #goldenDragonEventBanner #goldenDragonFightButton.leave-encounter{color:#ffd5b4!important;background:#2a1d16!important;box-shadow:0 0 0 1px #b46a3b!important}
/* 04/10: o golden já está na horda. A luta é ali; o botão só avisa (sem reiniciar a arena). */
#gameShell #goldenDragonEventBanner #goldenDragonFightButton.na-horda{color:#e9d9a8!important;background:#2b2414!important;box-shadow:0 0 0 1px #7a6230!important;cursor:var(--cur-seta,default);filter:none;transform:none}
#gameShell #goldenDragonEventBanner .gd-dica{display:block;margin:9px 0 0!important;color:#8d846f!important;font-size:calc(10.5px * var(--text-scale,1))!important;line-height:1.4;text-align:center}

/* Celular: o cartão ocupa a largura toda; medalhão e letras um pouco maiores. */
@media (max-width:640px){
  #goldenDragonEventBanner .gd-medalhao{width:84px;height:84px}
  #goldenDragonEventBanner #goldenDragonEventName{font-size:calc(21px * var(--text-scale,1))}
  #gameShell #goldenDragonEventBanner #goldenDragonFightButton{padding:13px!important;font-size:calc(14px * var(--text-scale,1))!important}
}