/* ============================================================================
   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}
.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-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:linear-gradient(180deg,#9c7626,#835e17);border:1px solid #bb9136;color:#ffe4a3}
.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}
.party-field small{color:#7f889b;font-size:calc(8px * var(--text-scale,1));line-height:1.4}
.party-form-summary{display:grid;gap:6px;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;grid-template-columns:auto minmax(0,1fr);gap:8px 10px;align-items:center;
  width:min(228px,44%);padding:9px 11px;
  border:1px solid rgba(215,169,68,.45);border-radius:11px;
  background:linear-gradient(180deg,rgba(28,24,16,.92),rgba(14,16,22,.94));
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  pointer-events:none;
}
#partyContractWidget.hidden{display:none!important}
.party-widget-avatar{display:grid;place-items:center;width:34px;height:34px;border:1px solid #4a4030;border-radius:9px;background:#12141b;font-size:calc(16px * var(--text-scale,1))}
.party-widget-avatar img{width:100%;height:100%;object-fit:contain;border-radius:8px}
.party-widget-copy{display:grid;gap:1px;min-width:0}
.party-widget-copy span{color:#c39531;font-size:calc(7px * var(--text-scale,1));font-weight:900;letter-spacing:1.2px}
.party-widget-copy strong{color:#f4e6c4;font-size:calc(10px * var(--text-scale,1));overflow-wrap:anywhere}
.party-widget-clock{grid-column:1/-1;color:#ffd56a;font-family:var(--font-display);font-size:calc(15px * var(--text-scale,1));letter-spacing:2px;text-align:center}
.party-widget-gains{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.party-widget-gain{padding:5px 6px;border-radius:7px;background:rgba(0,0,0,.35);text-align:center;min-width:0}
.party-widget-gain span{display:block;color:#8d95a8;font-size:calc(7px * var(--text-scale,1));font-weight:900;letter-spacing:.8px}
.party-widget-gain strong{display:block;margin-top:2px;color:#f0f2f6;font-size:calc(10px * var(--text-scale,1));overflow-wrap:anywhere}
.party-widget-track{grid-column:1/-1;height:5px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.10)}
.party-widget-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#d7a944,#ffe08a);transition:width .4s}
/* Pulso discreto do compartilhamento. Nao concorre com damage numbers: nao usa
   a camada de FX, nao empilha DOM e some sozinho. */
.party-widget-pulse{grid-column:1/-1;min-height:12px;text-align:center;color:#8fdcae;font-size:calc(8px * var(--text-scale,1));font-weight:900;opacity:0;transition:opacity .25s}
.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}
  .party-history-row{grid-template-columns:1fr}
  .party-history-status{justify-self:start}
  #partyContractWidget{width:min(200px,58%);left:8px;bottom:78px;padding:7px 9px}
}
@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%}
  #partyContractWidget{width:min(184px,66%);bottom:64px}
  .party-widget-gains{grid-template-columns:1fr}
}