/* Planejador de batalha (planner.js) */
.matchup-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.matchup-row.plan-open { grid-template-columns: minmax(0, 1fr) 420px; }
@media (max-width: 1300px) { .matchup-row.plan-open { grid-template-columns: minmax(0, 1fr); } }
#btnPlanner.on { border-color: var(--accent); color: var(--accent); }
.planner-panel { position: sticky; top: 10px; max-height: calc(100vh - 20px); overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.planner-panel > * { flex-shrink: 0; }
/* lado a lado: o planejador tem a mesma altura do painel do confronto (até o fim da seção da IA, aberta ou fechada)
   e rola por dentro; "contain: size" impede que o conteúdo dele estique a linha */
@media (min-width: 1301px) {
  .matchup-row.plan-open { align-items: stretch; }
  .matchup-row.plan-open > .planner-panel { position: relative; top: auto; max-height: none; min-height: 360px; contain: size; }
}
.planner-panel .panel-head { margin-bottom: 0; position: sticky; top: -12px; z-index: 2; background: var(--panel); padding: 12px 0 6px; margin-top: -12px; }
.planner-panel .panel-head h2 { font-size: 15px; margin: 0; }
.planner-panel .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.planner-panel .seg button { border: none; border-radius: 0; padding: 3px 9px; font-size: 12px; background: transparent; }
.planner-panel .seg button.on { background: var(--accent); color: #fff; }
.plan-banner { background: rgba(217,162,27,.15); border: 1px solid var(--warn); border-radius: 8px; padding: 6px 8px; font-size: 12.5px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.plan-vs { font-size: 13px; }
.pt { border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); padding: 6px 8px; margin-bottom: 6px; display: flex; flex-direction: column; gap: 4px; }
.pt.cur { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(79,140,255,.22); }
.pt.pending { opacity: .55; }
.pt.lead { background: transparent; border-style: dashed; }
.pt-head { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
.pt.lead .pt-head { cursor: default; }
.pt-head .pt-order { font-size: 11.5px; color: var(--muted); }
.pt-head .pt-order .me { color: var(--accent); font-weight: 700; }
.pt-head .pt-order .foe { color: var(--bad); font-weight: 700; }
.pt-head .pt-order .tie { color: var(--accent2); font-weight: 700; }
.pt-head .pt-order .warn { color: var(--warn); font-weight: 700; }
.pt-head .pt-order small { color: var(--muted); font-weight: 400; }
.pt-side { display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(150px, 46%); gap: 6px; align-items: center; padding: 3px 6px; border-radius: 8px; border-left: 3px solid var(--accent); background: rgba(79,140,255,.06); }
.pt-side.foe { border-left-color: var(--bad); background: rgba(209,75,75,.06); }
.pt-side select { width: 100%; min-width: 0; font-size: 12px; padding: 3px 6px; }
.pt-side select.empty { border-color: var(--warn); }
.pt-who { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; min-width: 0; font-size: 12.5px; }
.pt-who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.pt-hp { display: inline-block; width: 54px; height: 7px; border-radius: 4px; background: var(--line); overflow: hidden; }
.pt-hp i { display: block; height: 100%; background: var(--good); }
.pt-hp.mid i { background: var(--warn); } .pt-hp.low i, .pt-hp.dead i { background: var(--bad); }
.pt-pct { font-size: 11.5px; font-weight: 700; }
.pt-pct.mid { color: var(--warn); } .pt-pct.low, .pt-pct.dead { color: var(--bad); }
.pt-st { font-size: 9.5px; font-weight: 800; padding: 0 5px; border-radius: 5px; background: var(--line); }
.pt-st.par { background: #c9a800; color: #000; } .pt-st.brn { background: #d9542b; color: #fff; } .pt-st.psn, .pt-st.tox { background: #8a3fa8; color: #fff; } .pt-st.slp { background: #6c757d; color: #fff; } .pt-st.frz { background: #4fb8d9; color: #000; }
.pt-boost { font-size: 10.5px; color: var(--accent2); font-weight: 700; }
.pt-events { font-size: 11.5px; line-height: 1.45; padding: 2px 4px; }
.pt-events .ev { padding-left: 10px; text-indent: -10px; }
.pt-events .ev.me { color: var(--text); } .pt-events .ev.foe { color: var(--text); }
.pt-events .ev.me::before { content: "▸ "; color: var(--accent); } .pt-events .ev.foe::before { content: "▸ "; color: var(--bad); }
.pt-events .ev.muted { color: var(--muted); } .pt-events .ev.muted::before { content: ""; }
.pt-events .ev.warn { color: var(--warn); font-weight: 600; }
.pt-events .ev.dmg { font-weight: 600; }
.pt-adj { font-size: 11.5px; color: var(--accent2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 0 4px; }
.pt-events .ev.adj { color: var(--accent2); font-weight: 600; } .pt-events .ev.adj::before { content: ""; }
.pt-note { width: 100%; font-size: 11.5px; padding: 3px 6px; background: transparent; border: 1px dashed var(--line); }
.pt-note:focus { border-style: solid; }
.plan-foot { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.plan-sum { font-size: 12px; line-height: 1.5; }
/* cenário, chances, IA, substitutos e planos salvos */
.planner-panel .seg.scen button[data-scen="worst"].on { background: var(--bad); }
.planner-panel .seg.scen button[data-scen="best"].on { background: var(--good); }
.planner-panel [data-plan="saved"].on { border-color: var(--accent); color: var(--accent); }
.ev-tag { display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 999px; font-size: 10px; font-weight: 700; text-indent: 0; border: 1px solid var(--line); color: var(--muted); vertical-align: 1px; }
.ev-tag.ko { border-color: var(--bad); color: #fff; background: var(--bad); }
.ev-tag.risk { border-color: var(--warn); color: var(--warn); }
.pt-events .ev.item { color: var(--accent2); }
.pt-events .ev.item::before { content: ""; }
.pt-alive { font-size: 10px; font-weight: 700; padding: 0 5px; border-radius: 999px; border: 1px solid var(--good); color: var(--good); }
.pt-alive.mid { border-color: var(--warn); color: var(--warn); }
.pt-alive.bad { border-color: var(--bad); color: var(--bad); }
.pt-item { font-size: 10px; color: var(--muted); border: 1px dashed var(--line); border-radius: 5px; padding: 0 4px; }
.pt-item.gone { text-decoration: line-through; opacity: .7; }
.pt-ai { font-size: 11px; color: var(--muted); padding: 0 6px; }
.pt-ai b { color: var(--text); }
.pt-ai .warn { color: var(--warn); }
.pt-into { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; font-weight: 600; padding: 4px 6px; border-radius: 8px; border: 1px dashed var(--warn); background: rgba(217,162,27,.08); }
.pt-into.foe { border-color: var(--bad); background: rgba(209,75,75,.07); }
.pt-into select { font-size: 12px; padding: 2px 6px; max-width: 100%; }
.pt-into select.empty { border-color: var(--warn); }
.pt-into small { font-weight: 400; }
.tie-btn { border: 1px dashed var(--accent2); background: transparent; color: var(--accent2); font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.plan-sum small.mid { color: var(--warn); } .plan-sum small.bad { color: var(--bad); }
.plan-saved { border: 1px solid var(--accent); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 6px; background: var(--panel2); }
.plan-saved .ps-row { display: flex; gap: 6px; }
.plan-saved .ps-row input { flex: 1; min-width: 0; font-size: 12px; padding: 3px 6px; }
.plan-saved .ps-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: center; font-size: 12px; border-top: 1px solid var(--line); padding-top: 6px; }
.plan-foot button:disabled { opacity: .45; cursor: default; filter: grayscale(.6); }