/* ============================================================================
   PARTY CONTRACT SYSTEM — APRESENTACAO
   ----------------------------------------------------------------------------
   Segue a identidade do jogo: painel escuro, linha `--line`, dourado `--accent`
   para o que e contrato/valor, e tipografia em `calc(Npx * var(--text-scale,1))`
   para respeitar a escala de UI das Opcoes.

   Tres alvos obrigatorios, todos verificados em teste de browser:
     - desktop largo;
     - telas estreitas (a Board vira coluna unica, os cards nao estouram);
     - escalas de texto 1.0 a 1.3 (nada corta, nada sai da tela).
   ========================================================================== */

/* ---------- PAGINA PARTY --------------------------------------------------- */
.party-page-layout{display:grid;gap:16px;max-width:1280px;margin:0 auto}
.party-tabs{display:flex;gap:6px;flex-wrap:wrap;padding:6px;border:1px solid #2c313d;border-radius:12px;background:#151820}
.party-tab-button{flex:1 1 180px;min-width:0;padding:10px 12px;border:1px solid transparent;border-radius:9px;background:transparent;color:#8f97aa;font-size:calc(10px * var(--text-scale,1));font-weight:900;letter-spacing:1px}
.party-tab-button:hover{border-color:#3f4657;filter:none}
.party-tab-button.active{background:linear-gradient(180deg,#6870ff,#5861ee);color:#fff;box-shadow:0 5px 16px rgba(71,81,225,.20)}

.party-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:12px 14px;border:1px solid var(--line);border-radius:11px;background:var(--panel3)}
.party-toolbar label{display:flex;align-items:center;gap:7px;color:#9ba4b6;font-size:calc(9px * var(--text-scale,1));font-weight:900;letter-spacing:.8px}
.party-toolbar select,.party-toolbar input{min-width:0;padding:8px 9px;border:1px solid #3b4150;border-radius:7px;background:#151820;color:#fff;font-size:calc(10px * var(--text-scale,1));font-weight:bold}
.party-toolbar-note{flex:1 1 240px;color:#7f889b;font-size:calc(9px * var(--text-scale,1));line-height:1.45}

.party-section-title{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:2px 0 4px}
.party-section-title strong{color:#e7dcc2;font-family:var(--font-display);font-size:calc(13px * var(--text-scale,1));letter-spacing:1px}
.party-section-title small{color:#7f889b;font-size:calc(9px * var(--text-scale,1))}

.party-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.party-card{display:grid;gap:9px;padding:14px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,#232733,#1b1f28);min-width:0}
.party-card.featured{border-color:var(--accent);box-shadow:0 0 22px rgba(215,169,68,.16)}
.party-card.own{border-color:#5962e8}
.party-card-head{display:flex;align-items:center;gap:10px;min-width:0}
.party-avatar{display:grid;place-items:center;width:46px;height:46px;flex:0 0 46px;border:1px solid #3a4050;border-radius:11px;background:#151820;font-size:calc(20px * var(--text-scale,1))}
.party-avatar>img{width:100%;height:100%;object-fit:contain;border-radius:10px}
/* Retrato da classe (27/09): o rosto com moldura do chat/ranking ocupa a caixa sem ser esticado. */
.party-avatar:has(.cj-avatar){border-color:transparent;background:none}
.party-card-identity{min-width:0;display:grid;gap:2px}
.party-card-identity strong{color:#f4f4f6;font-size:calc(12px * var(--text-scale,1));overflow-wrap:anywhere}
.party-card-identity small{color:#8d95a8;font-size:calc(9px * var(--text-scale,1))}
.party-badges{display:flex;flex-wrap:wrap;gap:5px}
.party-badge{padding:3px 7px;border-radius:999px;background:#171b24;border:1px solid #333a49;color:#a9b2c4;font-size:calc(8px * var(--text-scale,1));font-weight:900;letter-spacing:.6px}
.party-badge.gold{border-color:#8a6925;background:rgba(215,169,68,.12);color:#ffd56a}
.party-badge.blue{border-color:#3f4a8a;background:rgba(89,98,232,.14);color:#aeb5ff}
.party-badge.green{border-color:#355e4a;background:rgba(74,174,115,.12);color:#8fdcae}
.party-badge.red{border-color:#7a3434;background:rgba(220,70,70,.12);color:#ff9a9a}

.party-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.party-metric{padding:8px 9px;border:1px solid #2d3340;border-radius:8px;background:#151820;min-width:0}
.party-metric span{display:block;color:#757e91;font-size:calc(8px * var(--text-scale,1));font-weight:900;letter-spacing:1px}
.party-metric strong{display:block;margin-top:3px;color:#f0f2f6;font-size:calc(11px * var(--text-scale,1));overflow-wrap:anywhere}
.party-estimate-note{color:#c39531;font-size:calc(8px * var(--text-scale,1));line-height:1.4}

.party-card-footer{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;padding-top:9px;border-top:1px solid #2d3340}
.party-price{display:grid;gap:2px;min-width:0}
.party-price span{color:#757e91;font-size:calc(8px * var(--text-scale,1));font-weight:900;letter-spacing:1px}
.party-price strong{color:#ffd56a;font-size:calc(13px * var(--text-scale,1));overflow-wrap:anywhere}
.party-card-footer button{padding:9px 13px;border-radius:8px;font-size:calc(9px * var(--text-scale,1));letter-spacing:.8px;white-space:normal}
.party-hire-button{background:var(--botao-ouro-fundo);border:1px solid var(--botao-ouro-borda);color:var(--botao-ouro-texto)}
.party-secondary-button{background:#383e4d;border:1px solid #444b5d;color:#dfe3ec}
.party-danger-button{background:#6d343a;border:1px solid #8c464d;color:#ffd7d7}

.party-empty{padding:24px;border:1px dashed #343947;border-radius:12px;background:#141720;color:#8d95a8;text-align:center;font-size:calc(10px * var(--text-scale,1));line-height:1.6}

/* ---------- CRIAR ANUNCIO -------------------------------------------------- */
.party-form{display:grid;gap:14px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.party-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.party-field{display:grid;gap:5px;min-width:0}
.party-field span{color:#8c94a8;font-size:calc(9px * var(--text-scale,1));font-weight:900;letter-spacing:1px}
.party-field select,.party-field input{width:100%;box-sizing:border-box;padding:9px 10px;border:1px solid #3b4150;border-radius:7px;background:#151820;color:#fff;font-size:calc(11px * var(--text-scale,1));font-weight:bold}
/* Moedas com a arte da joia (29/09). O <select> fica escondido e continua sendo o valor. */
.party-select-oculto{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;border:0!important;opacity:0!important;pointer-events:none!important}
.party-moedas{display:flex;flex-wrap:wrap;gap:6px}
.party-moeda-opcao{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:1 1 0;min-width:0;min-height:36px;padding:6px 10px;border:1px solid #3b4150;border-radius:7px;background:#151820;color:#c9cfdb;font-size:calc(11px * var(--text-scale,1));font-weight:bold;cursor:var(--cur-mao,pointer);white-space:nowrap}
.party-moeda-opcao:hover{border-color:#6b7390;color:#fff}
.party-moeda-opcao.active{border-color:#ffd56a;background:#2a2515;color:#ffe9a8;box-shadow:0 0 0 1px rgba(255,213,106,.35)}
.party-toolbar .party-moeda-opcao{flex:0 0 auto;min-height:32px;padding:4px 9px;font-size:calc(10px * var(--text-scale,1))}
.party-moeda-ico{width:18px;height:18px;object-fit:contain;flex:none;vertical-align:-4px}
.party-moeda{white-space:nowrap}
.party-field small{color:#7f889b;font-size:calc(8px * var(--text-scale,1));line-height:1.4}
/* Bloco e não grade: o texto corrido com <strong> virava uma linha por pedaço ("5K EXP/h" / "e" / "2.5K Gold/h"). */
.party-form-summary{display:block;padding:12px;border:1px solid #2d3340;border-radius:9px;background:#151820;color:#aeb4c3;font-size:calc(10px * var(--text-scale,1));line-height:1.6}
.party-form-summary strong{color:#ffd56a}
.party-form-error{padding:10px 12px;border:1px solid #6d3a3a;border-radius:8px;background:rgba(212,81,81,.10);color:#f0b0b0;font-size:calc(9px * var(--text-scale,1));line-height:1.45}
.party-form-actions{display:flex;flex-wrap:wrap;gap:8px}
.party-form-actions button{padding:11px 16px;border-radius:8px;font-size:calc(10px * var(--text-scale,1));letter-spacing:1px}

/* ---------- MEUS CONTRATOS ------------------------------------------------- */
.party-contract-panel{display:grid;gap:12px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.party-contract-live{display:grid;gap:10px;padding:14px;border:1px solid var(--accent);border-radius:11px;background:linear-gradient(180deg,rgba(215,169,68,.08),#1b1f28)}
.party-contract-live .party-clock{color:#ffd56a;font-family:var(--font-display);font-size:calc(22px * var(--text-scale,1));letter-spacing:2px}
.party-progress-track{height:9px;overflow:hidden;border-radius:999px;background:#303543}
.party-progress-fill{height:100%;width:0;background:linear-gradient(90deg,#d7a944,#ffd56a);transition:width .35s}
.party-history-list{display:grid;gap:8px}
.party-history-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center;padding:10px 12px;border:1px solid #2d3340;border-radius:9px;background:#151820}
.party-history-row strong{color:#e6e9f0;font-size:calc(10px * var(--text-scale,1));overflow-wrap:anywhere}
.party-history-row small{display:block;margin-top:3px;color:#858da2;font-size:calc(8px * var(--text-scale,1));line-height:1.5}
.party-history-status{padding:4px 9px;border-radius:999px;font-size:calc(8px * var(--text-scale,1));font-weight:900;letter-spacing:.8px;white-space:nowrap}
.party-history-status.completed{background:rgba(74,174,115,.14);color:#8fdcae}
.party-history-status.cancelled,.party-history-status.refunded{background:rgba(212,81,81,.14);color:#f0a8a8}
.party-history-status.expired,.party-history-status.interrupted{background:rgba(215,169,68,.14);color:#ffd56a}
.party-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.party-stat{padding:10px 12px;border:1px solid #2d3340;border-radius:9px;background:#151820}
.party-stat span{display:block;color:#757e91;font-size:calc(8px * var(--text-scale,1));font-weight:900;letter-spacing:1px}
.party-stat strong{display:block;margin-top:4px;color:#f0f2f6;font-size:calc(13px * var(--text-scale,1))}

/* ---------- WIDGET DA ARENA ------------------------------------------------
   Elemento pequeno, canto da arena. NAO renderiza um segundo combatente: o
   Combat V2 continua com um unico elenco na tela.
   -------------------------------------------------------------------------- */
#partyContractWidget{
  position:absolute;left:14px;bottom:96px;z-index:6;
  display:grid;gap:10px;
  width:min(300px,46%);box-sizing:border-box;padding:12px 14px 10px;
  border:1px solid rgba(243,207,122,.42);border-radius:12px;
  background:linear-gradient(180deg,rgba(24,22,18,.93),rgba(12,13,18,.95));
  box-shadow:0 12px 30px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,235,180,.08);
  color:#e9e2cf;pointer-events:none;
}
#partyContractWidget.hidden{display:none!important}
.party-widget-rotulo{display:none}
/* OPÇÃO A (29/09): retrato com moldura dourada, quem é, e o tempo grande à direita. */
.party-widget-topo{display:flex;align-items:center;gap:11px;min-width:0}
.party-widget-avatar{flex:none;display:grid;place-items:center;width:46px;height:46px;border:1px solid #b8913f;border-radius:10px;background:#12141b;
  box-shadow:0 0 0 2px rgba(0,0,0,.5),0 0 10px rgba(243,207,122,.18);overflow:hidden;font-size:calc(20px * var(--text-scale,1))}
.party-widget-avatar img{width:100%;height:100%;object-fit:contain;border-radius:8px}
.party-widget-copy{flex:1;display:grid;gap:1px;min-width:0}
.party-widget-copy span{color:#b8913f;font-size:calc(8px * var(--text-scale,1));font-weight:900;letter-spacing:1.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.party-widget-copy strong{color:#fff3d2;font-family:var(--font-display),Georgia,serif;font-size:calc(16px * var(--text-scale,1));line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.party-widget-copy em{font-style:normal;color:#8a92a6;font-size:calc(9px * var(--text-scale,1));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.party-widget-copy em:empty{display:none}
.party-widget-tempo{flex:none;text-align:right}
.party-widget-tempo small{display:block;color:#7f879a;font-size:calc(7px * var(--text-scale,1));font-weight:900;letter-spacing:1.3px}
.party-widget-clock{color:#f3cf7a;font-family:var(--font-display),Georgia,serif;font-size:calc(17px * var(--text-scale,1));letter-spacing:1px;font-variant-numeric:tabular-nums}
/* A barra em 10 partes, como a ETAPA do painel Área Atual: a mesma barra de antes com uma máscara de vãos. */
.party-widget-track{height:5px;overflow:hidden;background:rgba(255,255,255,.10);
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(10% - 3px),transparent calc(10% - 3px) 10%);
          mask:repeating-linear-gradient(90deg,#000 0 calc(10% - 3px),transparent calc(10% - 3px) 10%)}
.party-widget-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#d7a944,#ffe08a);transition:width .4s}
.party-widget-gains{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.party-widget-gain{display:flex;align-items:center;gap:8px;min-width:0;padding:7px 9px;border-radius:8px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.05)}
.party-widget-gain>div{min-width:0}
.party-widget-ico{flex:none;width:22px;height:22px;object-fit:contain;font-size:calc(16px * var(--text-scale,1));line-height:22px;text-align:center;font-style:normal}
.party-widget-gain span:not(.party-widget-ico){display:block;color:#8a92a6;font-size:calc(7px * var(--text-scale,1));font-weight:900;letter-spacing:.9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.party-widget-gain strong{display:block;margin-top:1px;color:#fff;font-size:calc(13px * var(--text-scale,1));overflow-wrap:anywhere}
/* A linha "ao vivo": o ponto verde, o último ganho (o pulso agregado de sempre) e quando vem a próxima entrega. */
.party-widget-vivo{display:flex;align-items:center;gap:6px;min-height:14px;color:#8fdcae;font-size:calc(9px * var(--text-scale,1));font-weight:700;min-width:0}
.party-widget-vivo>i{flex:none;width:7px;height:7px;border-radius:50%;background:#5fd08f;box-shadow:0 0 8px #5fd08f}
.party-widget-vivo-rotulo{flex:none}
.party-widget-next{margin-left:auto;flex:none;color:#7f879a;font-weight:600}
/* 04/10 (autor): para quem contratou, o ritmo do vendedor em cor (party-ui.js, ritmoDoVendedor). */
.party-widget-ritmo{display:flex;align-items:center;gap:6px;min-width:0;font-size:calc(9.5px * var(--text-scale,1));font-weight:800;color:#c9cfdb}
.party-widget-ritmo[hidden]{display:none}
.party-widget-ritmo::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:#8a92a6}
#partyContractWidget[data-ritmo="bom"] .party-widget-ritmo{color:#8fdcae}
#partyContractWidget[data-ritmo="bom"] .party-widget-ritmo::before{background:#5fd08f;box-shadow:0 0 7px #5fd08f}
#partyContractWidget[data-ritmo="caindo"] .party-widget-ritmo{color:#f3cf7a}
#partyContractWidget[data-ritmo="caindo"] .party-widget-ritmo::before{background:#f3c34a;box-shadow:0 0 7px #f3c34a}
#partyContractWidget[data-ritmo="baixo"] .party-widget-ritmo,#partyContractWidget[data-ritmo="parado"] .party-widget-ritmo{color:#ff8d84}
#partyContractWidget[data-ritmo="baixo"] .party-widget-ritmo::before,#partyContractWidget[data-ritmo="parado"] .party-widget-ritmo::before{background:#ef5a4f;box-shadow:0 0 7px #ef5a4f}
/* Pulso discreto do compartilhamento. Nao concorre com damage numbers: nao usa
   a camada de FX, nao empilha DOM e some sozinho. */
.party-widget-pulse{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#8fdcae;opacity:0;transition:opacity .25s}
.party-widget-pulse:not(:empty)::before{content:"• "}
.party-widget-pulse.show{opacity:1}

/* EDITOR VISUAL — o widget precisa ser SELECIONAVEL para poder ser movido.
   No jogo normal ele tem `pointer-events:none` para nao roubar clique da arena;
   com o editor aberto isso e invertido, no mesmo padrao de
   `.col-editor-fx-preview`.

   O `:not(.hidden)` NAO e detalhe: a primeira versao desta regra revelava o
   widget escondido dentro do editor, e ele passava a cobrir `#playerFighter` —
   clicar no bloco do jogador selecionava o widget. Foi o
   `tests/v092-editor-battle.mjs` que pegou. A regra correta e a honesta: o
   editor edita o que esta na tela. Para posicionar o widget, tenha um contrato
   ativo (o DEV MENU cria um em um clique). */
body.col-editor-active #partyContractWidget:not(.hidden){pointer-events:auto!important}

/* ---------- RESUMO DE CONCLUSAO ------------------------------------------- */
.party-summary-card{width:min(460px,100%)}
.party-summary-list{display:grid;gap:8px;margin:14px 0}
.party-summary-row{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid #2d3340;border-radius:8px;background:#151820;color:#aeb4c3;font-size:calc(10px * var(--text-scale,1))}
.party-summary-row strong{color:#f0f2f6}

/* ---------- DEV MENU ------------------------------------------------------- */
.dev-party-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-bottom:12px}
.dev-party-card{padding:9px 10px;border:1px solid #353347;border-radius:9px;background:#151720;min-width:0}
.dev-party-card span{display:block;color:#8c7ba7;font-size:calc(7px * var(--text-scale,1));font-weight:900;letter-spacing:.8px}
.dev-party-card strong{display:block;margin:3px 0;color:#e6d5ff;font-size:calc(13px * var(--text-scale,1))}
.dev-party-card small{display:block;color:#817b8b;font-size:calc(8px * var(--text-scale,1))}
.dev-party-row{padding:8px 10px;margin-bottom:6px;border:1px solid #2d3340;border-radius:8px;background:#131620}
.dev-party-row strong{display:block;color:#dfe3ec;font-size:calc(9px * var(--text-scale,1));overflow-wrap:anywhere}
.dev-party-row small{display:block;margin-top:3px;color:#8d95a8;font-size:calc(8px * var(--text-scale,1));line-height:1.5}
#devPartyStatus h5{margin:12px 0 6px;color:#c39531;font-size:calc(9px * var(--text-scale,1));letter-spacing:1.2px}
#devPartyJson{display:block;max-height:220px;overflow:auto;padding:10px;border:1px solid #2d3340;border-radius:8px;background:#0e1016;color:#9fb4c9;font-family:monospace;font-size:calc(8px * var(--text-scale,1));white-space:pre;line-height:1.45}

/* ---------- RESPONSIVO ----------------------------------------------------- */
@media(max-width:900px){
  .party-board{grid-template-columns:1fr}
  .party-toolbar{flex-direction:column;align-items:stretch}
  .party-toolbar label{justify-content:space-between}
  /* 06/10 (auditoria Parte E): em coluna, o flex-basis de 240 px da nota virava ALTURA
     e abria um bloco vazio enorme antes da lista de anúncios. */
  .party-toolbar-note{flex:0 0 auto}
  .party-history-row{grid-template-columns:1fr}
  .party-history-status{justify-self:start}
  #partyContractWidget{width:min(260px,62%);left:8px;bottom:78px;padding:9px 10px 8px;gap:8px}
  .party-widget-avatar{width:38px;height:38px}
}
@media(max-width:600px){
  .party-tab-button{flex:1 1 100%}
  .party-metrics{grid-template-columns:1fr}
  .party-card-footer{align-items:stretch}
  .party-card-footer button{width:100%}
  /* CELULAR: versão compacta (autor, 29/09: "o menu de party no cel ocupa metade da arena").
     Só o essencial em ~64 px de altura: retrato, nome, tempo, a barra e os dois ganhos em
     uma linha. Rótulos, classe e a linha "ao vivo" ficam para o PC. */
  /* No alto da arena (o céu), longe do herói e da barra de skills. */
  #partyContractWidget{top:10px;bottom:auto}
}
/* Celular deitado: embaixo à esquerda ele cobria o herói. Vai para a direita, logo abaixo do cartão "Área atual"
   (o botão do Golden, deitado, fica no canto de baixo à direita). */
@media(max-height:520px) and (max-width:1120px) and (min-width:601px){
  #partyContractWidget{left:auto;right:14px;top:132px;bottom:auto}
}
/* Celular em pé (até 600 px) e deitado (até 520 px de altura): o mesmo cartão compacto. */
@media(max-width:600px),(max-height:520px) and (max-width:1120px){
  #partyContractWidget{width:min(230px,62%);padding:6px 8px 7px;gap:5px;border-radius:10px}
  .party-widget-avatar .cj-avatar{--cj-tam:28px!important}
  .party-widget-topo{gap:7px}
  .party-widget-avatar{width:28px;height:28px;border-radius:7px;overflow:hidden}
  .party-widget-copy span,.party-widget-copy em,.party-widget-tempo small,
  .party-widget-gain span:not(.party-widget-ico),.party-widget-vivo{display:none}
  .party-widget-copy strong{font-size:calc(12px * var(--text-scale,1))}
  .party-widget-clock{font-size:calc(12px * var(--text-scale,1))}
  .party-widget-track{height:3px}
  .party-widget-gains{gap:5px}
  .party-widget-gain{padding:2px 6px;gap:4px;border-radius:6px}
  .party-widget-gain strong{margin:0;font-size:calc(11px * var(--text-scale,1))}
  .party-widget-ico{width:14px;height:14px;font-size:calc(11px * var(--text-scale,1));line-height:14px}
  /* 03/10 (autor, print do Redmi: "essa janela de party tá imensa"): ainda mais enxuto, ~40 px de altura.
     O retrato pequeno ocupa as duas linhas; na 1ª o nome e o tempo, na 2ª os dois ganhos soltos (sem caixinha),
     e a barra fininha embaixo. A largura acompanha o conteúdo em vez de reservar 230 px. */
  #partyContractWidget{width:auto;min-width:0;max-width:min(240px,64%);grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;column-gap:6px;row-gap:2px;padding:4px 7px 5px 5px;border-radius:8px}
  .party-widget-topo{display:contents}
  .party-widget-avatar .cj-avatar{--cj-tam:24px!important}
  .party-widget-avatar{width:24px;height:24px;border-radius:6px;grid-column:1;grid-row:1/3}
  .party-widget-copy{grid-column:2;grid-row:1}
  .party-widget-tempo{grid-column:3;grid-row:1;line-height:1.2}
  .party-widget-copy strong{font-size:calc(11px * var(--text-scale,1));line-height:1.2}
  .party-widget-clock{display:block;font-size:calc(11px * var(--text-scale,1));line-height:1.2;letter-spacing:.3px}
  .party-widget-gains{grid-column:2/4;grid-row:2;display:flex;flex-wrap:wrap;gap:0 9px;min-width:0}
  .party-widget-gain{padding:0;gap:3px;border:0;background:none;flex:0 1 auto}
  .party-widget-gain strong{font-size:calc(10px * var(--text-scale,1));line-height:1.2;white-space:nowrap;overflow-wrap:normal}
  .party-widget-ico{width:12px;height:12px;font-size:calc(10px * var(--text-scale,1));line-height:12px}
  .party-widget-ritmo{grid-column:2/4;grid-row:3;gap:4px;font-size:calc(9px * var(--text-scale,1));line-height:1.2}
  .party-widget-ritmo::before{width:6px;height:6px}
  .party-widget-track{grid-column:1/4;grid-row:4;height:2px;margin-top:1px}
  /* 04/10 (autor): "no cel, deixa só um mini ícone com o personagem da party pra se clicar ver as infos".
     Fechado: só o rosto do parceiro, o ponto verde de "ao vivo" e a barra do tempo embaixo. Um toque abre o
     cartão de cima (party-ui.js, classe party-widget-aberto); outro toque fecha, e ele fecha sozinho em 6 s. */
  #partyContractWidget{pointer-events:auto;cursor:var(--cur-mao,pointer);-webkit-tap-highlight-color:transparent}
  #partyContractWidget:not(.party-widget-aberto){grid-template-columns:30px;row-gap:2px;padding:3px;border-radius:9px}
  #partyContractWidget:not(.party-widget-aberto) .party-widget-copy,
  #partyContractWidget:not(.party-widget-aberto) .party-widget-tempo,
  #partyContractWidget:not(.party-widget-aberto) .party-widget-gains,
  #partyContractWidget:not(.party-widget-aberto) .party-widget-ritmo{display:none}
  #partyContractWidget:not(.party-widget-aberto) .party-widget-avatar{grid-row:1;width:30px;height:30px}
  #partyContractWidget:not(.party-widget-aberto) .party-widget-avatar .cj-avatar{--cj-tam:30px!important}
  #partyContractWidget:not(.party-widget-aberto) .party-widget-track{grid-column:1;grid-row:3;margin:0}
  #partyContractWidget:not(.party-widget-aberto) .party-widget-rotulo{display:block;grid-column:1;grid-row:2;text-align:center;
    color:#f3cf7a;font-size:calc(7.5px * var(--text-scale,1));font-weight:900;letter-spacing:.6px;line-height:1}
  #partyContractWidget:not(.party-widget-aberto)::after{content:"";position:absolute;top:2px;right:2px;width:9px;height:9px;border-radius:50%;
    background:#5fd08f;box-shadow:0 0 0 1.5px #12141b,0 0 6px #5fd08f}
  /* O pontinho do retrato fechado mostra o ritmo do vendedor para quem contratou. */
  #partyContractWidget[data-ritmo="medindo"]:not(.party-widget-aberto)::after{background:#8a92a6;box-shadow:0 0 0 1.5px #12141b}
  #partyContractWidget[data-ritmo="caindo"]:not(.party-widget-aberto)::after{background:#f3c34a;box-shadow:0 0 0 1.5px #12141b,0 0 6px #f3c34a}
  #partyContractWidget[data-ritmo="baixo"]:not(.party-widget-aberto)::after,
  #partyContractWidget[data-ritmo="parado"]:not(.party-widget-aberto)::after{background:#ef5a4f;box-shadow:0 0 0 1.5px #12141b,0 0 6px #ef5a4f}
}

/* PC (04/10, autor: "player reclamando do menu de party grande, podemos fazer que nem no android, expansivo"):
   fechado, só o retrato do parceiro com "PARTY" embaixo, o ponto do ritmo e a barra do tempo. Um clique abre o
   cartão inteiro de sempre; outro clique fecha, e ele fecha sozinho em 6 s (party-ui.js, party-widget-aberto). */
@media(min-width:601px) and (min-height:521px),(min-width:1121px){
  #partyContractWidget{pointer-events:auto;cursor:var(--cur-mao,pointer)}
  #partyContractWidget:not(.party-widget-aberto){width:auto;padding:5px;gap:4px;border-radius:11px;justify-items:center}
  #partyContractWidget:not(.party-widget-aberto) .party-widget-copy,
  #partyContractWidget:not(.party-widget-aberto) .party-widget-tempo,
  #partyContractWidget:not(.party-widget-aberto) .party-widget-gains,
  #partyContractWidget:not(.party-widget-aberto) .party-widget-ritmo,
  #partyContractWidget:not(.party-widget-aberto) .party-widget-vivo{display:none}
  #partyContractWidget:not(.party-widget-aberto) .party-widget-track{width:46px;height:3px;margin:0}
  #partyContractWidget:not(.party-widget-aberto) .party-widget-rotulo{display:block;text-align:center;color:#f3cf7a;
    font-size:calc(9px * var(--text-scale,1));font-weight:900;letter-spacing:1px;line-height:1}
  #partyContractWidget:not(.party-widget-aberto)::after{content:"";position:absolute;top:3px;right:3px;width:10px;height:10px;border-radius:50%;
    background:#5fd08f;box-shadow:0 0 0 1.5px #12141b,0 0 6px #5fd08f}
  #partyContractWidget[data-ritmo="medindo"]:not(.party-widget-aberto)::after{background:#8a92a6;box-shadow:0 0 0 1.5px #12141b}
  #partyContractWidget[data-ritmo="caindo"]:not(.party-widget-aberto)::after{background:#f3c34a;box-shadow:0 0 0 1.5px #12141b,0 0 6px #f3c34a}
  #partyContractWidget[data-ritmo="baixo"]:not(.party-widget-aberto)::after,
  #partyContractWidget[data-ritmo="parado"]:not(.party-widget-aberto)::after{background:#ef5a4f;box-shadow:0 0 0 1.5px #12141b,0 0 6px #ef5a4f}
}

/* JANELA DE CONTRATAR (04/10): retrato, preço com a joia, retorno em destaque, regras em tópicos. */
.col-dialog-card.party-contratar{width:min(480px,100%)}
.party-contratar .pc{display:grid;gap:12px;color:#c9ced9;font-size:calc(12.5px * var(--text-scale, 1));line-height:1.45}
.party-contratar .pc-quem{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid rgba(215,169,68,.28);border-radius:12px;background:linear-gradient(180deg,rgba(215,169,68,.08),rgba(255,255,255,.02))}
.party-contratar .pc-retrato{flex:none;line-height:0}
.party-contratar .pc-nome{display:grid;gap:2px;min-width:0}
.party-contratar .pc-nome strong{color:#f4ead2;font-size:calc(15px * var(--text-scale, 1));overflow-wrap:anywhere}
.party-contratar .pc-nome span{color:#aab1bf}
.party-contratar .pc-nome .pc-power{color:#9fb0ff;font-weight:700}
.party-contratar .pc-rotulo{display:block;color:#aab1bf;font-size:calc(11px * var(--text-scale, 1));letter-spacing:.04em}
.party-contratar .pc-blocos{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:10px}
.party-contratar .pc-bloco,.party-contratar .pc-ganho{display:grid;align-content:start;gap:3px;padding:10px 12px;border:1px solid var(--line,#343a48);border-radius:12px;background:rgba(255,255,255,.03);min-width:0}
.party-contratar .pc-bloco strong{color:#f4ead2;font-size:calc(16px * var(--text-scale, 1))}
.party-contratar .pc-bloco small,.party-contratar .pc-ganho small{color:#8d94a3;font-size:calc(11px * var(--text-scale, 1))}
.party-contratar .pc-ganho{border-color:rgba(95,208,143,.38);background:linear-gradient(180deg,rgba(95,208,143,.10),rgba(95,208,143,.03))}
.party-contratar .pc-ganho strong{font-size:calc(16px * var(--text-scale, 1));overflow-wrap:anywhere}
.party-contratar .pc-exp{color:#7fe0a6}
.party-contratar .pc-gold{color:#f3cf7a}
.party-contratar .pc-regras{margin:0;padding:0;list-style:none;display:grid;gap:5px}
.party-contratar .pc-regras li{position:relative;padding-left:16px}
.party-contratar .pc-regras li::before{content:"";position:absolute;left:3px;top:.6em;width:6px;height:6px;border-radius:2px;background:#d7a944;transform:rotate(45deg)}
@media(max-width:340px){.party-contratar .pc-blocos{grid-template-columns:1fr}}

/* PARTY AO LADO (20/10, SQL 1954, src/combat/party-horda.js): o retrato do ajudante ao lado do herói na horda.
   O jogo põe left/top (pés do herói) e --party-lado-k (a altura do herói / 150). Não recebe clique. */
.party-lado{position:absolute;z-index:4;width:150px;height:0;pointer-events:none;
  transform:translate(-50%,0) scale(var(--party-lado-k,1));transform-origin:50% 0}
.party-lado[hidden]{display:none}
/* 22/10 (autor: "a sombra azul ... mais parece que"): sem brilho azul em volta; a sombra no chão é a do
   pet do herói (party-horda.js sombra). O quadro gira e vira em volta dos pés (golpe e lado do alvo). */
.party-lado-corpo{position:absolute;left:0;bottom:0;width:150px;height:150px;display:flex;align-items:flex-end;justify-content:center;
  transform-origin:50% 100%}
/* Nome e título EM CIMA da cabeça, o título acima do nome (22/10, autor: "o titulo cobre o nome dele" e "o titulo
   ta muito grande"). No celular o retrato encolhe junto com o herói (--party-lado-k ~0,4): o nome e o título
   encolhem só até ~80% do tamanho do PC, senão o nome ficava com 7 px. */
.party-lado-topo{--party-lado-leg:max(1,calc(.75 / var(--party-lado-k,1)));--party-lado-leg-t:max(1,calc(.55 / var(--party-lado-k,1)));
  position:absolute;left:50%;bottom:calc(152px + var(--party-lado-acima,0px));transform:translateX(-50%);
  translate:var(--party-lado-dx,0px) 0;   /* desvio do painel no celular deitado (party-horda.js lugarDoNome) */
  display:flex;flex-direction:column;align-items:center;gap:0;white-space:nowrap}
.party-lado-nome{font:700 calc(13px * var(--party-lado-leg)) / 1.1 system-ui,sans-serif;color:#9fd8ff;text-shadow:0 1px 3px #000,0 0 2px #000}
.party-lado-nome small{font-size:.72em;color:#ffd77a;margin-left:2px}
.party-lado-topo>.pvp-title-badge{position:relative!important;top:auto!important;left:auto!important;margin:0 0 -4px!important;
  width:calc(96px * var(--party-lado-leg-t))!important;height:calc(32px * var(--party-lado-leg-t))!important;translate:none!important;scale:none!important}
.party-lado-topo>.pvp-title-badge .pvp-title-text{font-size:calc(11px * var(--party-lado-leg-t))!important}
/* O mesmo respiro do herói parado (colHeroiRespiro), na moldura presa nos pés; pet e companheiros não respiram. */
.party-lado-corpo>.pvp-fighter-frame{transform-origin:50% 100%;animation:colHeroiRespiro 3.2s ease-in-out infinite;will-change:scale}
body.combat-fx-off .party-lado-corpo>.pvp-fighter-frame,body.graphics-lite .party-lado-corpo>.pvp-fighter-frame{animation:none;scale:none}
@media(prefers-reduced-motion:reduce){.party-lado-corpo>.pvp-fighter-frame{animation:none;scale:none}}
/* Pet, corvo e cavalo do colega: o mesmo jeito da ficha (battle.css, opção C de 05/10). */
.party-lado-corpo>.pvp-fighter-frame .pvp-comp-fixo{animation:colHeroiRespiroInverso 3.2s ease-in-out infinite;will-change:scale}
.party-lado-corpo>.pvp-fighter-frame [data-duelo-parte="pet"] .pvp-comp-fixo>*{transform-origin:50% 100%;animation:colPetCabeca 3s ease-in-out -.7s infinite;will-change:scale,rotate}
.party-lado-corpo>.pvp-fighter-frame [data-duelo-parte="corvo"] .pvp-comp-fixo>*{transform-origin:50% 50%;animation:colAguiaOito 5.2s ease-in-out -1.2s infinite;will-change:translate,rotate}
.party-lado-corpo>.pvp-fighter-frame [data-duelo-parte="cavalo"] .pvp-comp-fixo>*{transform-origin:30% 100%;animation:colCavaloPeso 5.2s ease-in-out infinite;will-change:scale,rotate}

/* 23/10 (autor: "ele não deveria ficar junto dos buff, e sim mais acima da orbe de vida"): no PC o HUD mora dentro da
   arena (hud-arena.css) e o cartão da Party ficava atrás da orbe de vida. Ele fica logo acima da estátua da orbe,
   centrado nela; aberto, cresce para cima. As medidas vêm das mesmas variáveis do HUD (--ahud-orbe, --ahud-lado). */
@media (min-width:901px){
  html:not(#_) #gameShell #monsterCard>#partyContractWidget{top:auto!important;right:auto!important;
    left:calc(var(--ahud-lado,50px) + var(--ahud-orbe,82px) * .5 - 23px)!important;
    bottom:calc(var(--ahud-orbe,82px) * 1.557 + 22px)!important}
}

/* 23/10 (autor: "menu de party defasado, nao tem nada util de informação"): o cartão aberto ganha por hora,
   até o fim, o preço e o poder, e um botão para a tela da Party. Fechado, nada disso aparece. */
.party-widget-info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 10px;margin:0;padding:7px 9px;border-radius:8px;
  background:rgba(0,0,0,.28);border:1px solid rgba(243,207,122,.12)}
.party-widget-info>div{min-width:0}
.party-widget-info>div[hidden]{display:none}
/* Ao lado: o Gold fica sem número, então o quadrinho dele some (antes ficava só a moeda solta). */
.party-widget-gain:has(#partyWidgetGold:empty){display:none}
.party-widget-info dt{color:#8a92a6;font-size:calc(7.5px * var(--text-scale,1));font-weight:900;letter-spacing:.9px;white-space:nowrap}
.party-widget-info dd{margin:1px 0 0;color:#f4ead2;font-size:calc(10.5px * var(--text-scale,1));font-weight:700;line-height:1.25;overflow-wrap:anywhere;white-space:pre-line}
.party-widget-info dd .party-moeda{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.party-widget-info dd .party-moeda-ico{width:14px;height:14px}
.party-widget-ver{pointer-events:auto;width:100%;min-height:28px;border-radius:8px;border:1px solid #b8913f;cursor:var(--cur-mao,pointer);
  background:linear-gradient(180deg,#2a2418,#17140e);color:#f3cf7a;font-weight:900;letter-spacing:1px;font-size:calc(10px * var(--text-scale,1))}
.party-widget-ver:hover{border-color:#ffd56a;color:#ffe08a}
#partyContractWidget:not(.party-widget-aberto) .party-widget-info,
#partyContractWidget:not(.party-widget-aberto) .party-widget-ver{display:none!important}
/* Aberto, o cartão fica por cima do quadro da área e do inimigo enquanto é lido (fecha sozinho em 10 s). */
html:not(#_) #gameShell #partyContractWidget.party-widget-aberto{z-index:40!important}
@media(max-width:600px),(max-height:520px) and (max-width:1120px){
  #partyContractWidget.party-widget-aberto .party-widget-info{grid-column:1/4;grid-row:5;padding:5px 7px;gap:4px 8px}
  #partyContractWidget.party-widget-aberto .party-widget-ver{grid-column:1/4;grid-row:6;min-height:26px}
  .party-widget-info dd{font-size:calc(9.5px * var(--text-scale,1))}
}