/* css/frentes.css — Guerra por frentes (2022): cartão da frente, linha −100…+100, posturas, general, divisão das tropas e relatório. */
  .fhow{font-size:.8rem;margin:2px 0 8px}
  .fcard2{border:1px solid var(--line);border-left:4px solid #c9a45c;border-radius:6px;background:#14120f;padding:8px 10px 10px;margin:0 0 10px;font-family:system-ui,sans-serif;font-size:.84rem}
  .fcard2 .fhead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
  .fcard2 h4{margin:0;font-size:1rem;color:var(--gold)}.fcard2 .fhead small{color:var(--muted)}
  .fline{margin:8px 0 6px}
  .flbar{position:relative;height:14px;border-radius:7px;background:linear-gradient(90deg,#5a2219 0%,#2a1d17 45%,#2a1d17 55%,#1b3350 100%);border:1px solid var(--line)}
  .flbar .mid{position:absolute;left:50%;top:-3px;bottom:-3px;width:2px;background:#f3e6c8aa}
  .flbar .pos{position:absolute;top:-4px;width:6px;height:20px;margin-left:-3px;border-radius:3px;background:#f3c969;box-shadow:0 0 6px #f3c969}
  .flbar .pos.down{background:#ff6a52;box-shadow:0 0 6px #ff6a52}
  .flbar .ghost{position:absolute;top:2px;height:8px;background:#f3c96955;border-radius:4px}
  .flends{display:flex;justify-content:space-between;gap:6px;margin-top:3px;font-size:.74rem;color:var(--muted)}
  .flends .bad b{color:#f0a493}.flends .good b{color:#9cc3ea}.flends .flv b{color:var(--ink)}
  .fstats{display:grid;grid-template-columns:1fr;gap:3px;margin:6px 0}
  .fstat{display:grid;grid-template-columns:86px 1fr 34px;align-items:center;gap:6px;font-size:.76rem}
  .fstat span{color:var(--muted)}.fstat b{text-align:right}.fstat .bar{height:7px}
  .fenemy,.fgen{display:flex;align-items:center;gap:8px;margin:8px 0;padding:6px 8px;border-radius:6px;background:#0005}
  .fenemy > div,.fgen > div{display:flex;flex-direction:column;gap:2px;min-width:0}
  .fenemy small,.fgen small{color:var(--muted);font-size:.74rem}
  .fint{font-size:.84rem}.fint.avancar{color:#ff8a70}.fint.segurar{color:#e5d3a8}.fint.recuar{color:#9cc3ea}
  .fwarn{color:#ffb070;font-style:normal;font-size:.8rem;margin:4px 0}
  .fposts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:6px 0}
  .fpost{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:64px;padding:7px 8px;border-radius:6px;border:1px solid var(--line);background:#1d1a16;color:var(--ink);font:inherit;font-size:.84rem;text-align:left;cursor:pointer}
  .fpost small{font-size:.7rem;color:var(--muted);line-height:1.25}
  .fpost.avancar{border-color:#a8402f}.fpost.segurar{border-color:#8a7a52}.fpost.recuar{border-color:#4f7aa3}
  .fpost:not(:disabled):hover{background:#2a2414}
  .fpost.on{background:#2a2414;border-color:var(--gold);box-shadow:inset 0 0 0 2px var(--gold)}
  .fpost .sug{position:absolute;top:-8px;right:6px;font-style:normal;font-size:.64rem;padding:1px 6px;border-radius:8px;background:#3a5a2e;color:#d8f0c8}
  .fpost:disabled{opacity:.45;cursor:not-allowed}
  .fpost:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
  .fsel{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:.74rem;color:var(--muted)}
  .fsel select,.fauto select{background:#14120f;color:var(--ink);border:1px solid var(--line);border-radius:4px;padding:4px 6px;font:inherit;font-size:.78rem;max-width:100%}
  .foff{display:flex;flex-direction:column;gap:3px;margin:6px 0}.foff .secondary{align-self:flex-start;margin:0}
  .fsplit{margin:10px 0;padding:8px 10px;border:1px dashed var(--line);border-radius:6px;font-family:system-ui,sans-serif;font-size:.82rem}
  .fsl{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;margin:6px 0}
  .fsl input{width:100%;accent-color:#c9a45c}.fsl b{color:var(--gold)}
  .fauto{margin:10px 0;font-family:system-ui,sans-serif;font-size:.82rem}
  .frvs{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin:10px 0}
  .frside{display:flex;align-items:center;gap:8px;padding:8px;border-radius:6px;background:#0006;font-family:system-ui,sans-serif}
  .frside > div{display:flex;flex-direction:column}.frside small{color:var(--muted);font-size:.74rem}.frside em{font-style:normal;color:#ffb070;font-size:.76rem}
  .frside.p{border-left:4px solid #4f7aa3}.frside.e{border-left:4px solid #a8402f}
  .frline{margin:4px 0 10px;font-family:system-ui,sans-serif}.frmove{margin:6px 0 0;font-size:.84rem}
  .frmove .good{color:#9cc3ea}.frmove .bad{color:#f0a493}
  @media (max-width:520px){ .fposts{grid-template-columns:1fr} .fpost{min-height:52px} .frvs{grid-template-columns:1fr} .frvs .vs{text-align:center} .fsl{grid-template-columns:1fr} }
  :is(.fcard2,.tpconf,.sidepanel) .pw{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;font-size:.78rem;margin:4px 0 6px}
  :is(.fcard2,.tpconf,.sidepanel) .pw .bar2{height:9px;border-radius:5px;overflow:hidden;display:flex;background:#0006}
  :is(.fcard2,.tpconf,.sidepanel) .pw .bar2 i{display:block;height:100%}:is(.fcard2,.tpconf,.sidepanel) .pw .bar2 i.p{background:#5d8fc4}:is(.fcard2,.tpconf,.sidepanel) .pw .bar2 i.e{background:#c2563f}
  .fsel{flex-wrap:wrap}.fsel select{min-width:0;flex:1 1 160px}
  .batlist .batrow{font-family:inherit}
  /* Fase 13: painel dos exércitos (cartão do selecionado, destinos, lista, ameaças, passos) */
  .tpcard{border:1px solid var(--line);border-left:4px solid #5b8fc7;border-radius:8px;background:#14120f;padding:8px 10px 10px;margin:0 0 10px;font-family:system-ui,sans-serif;font-size:.86rem}
  .tphead{display:flex;align-items:center;gap:8px}.tphead>div{flex:1;min-width:0}.tphead h4{margin:0;font-size:1rem;color:var(--gold)}.tphead small{color:var(--muted)}
  .tpcur{margin:6px 0}
  .tptgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin:6px 0}
  .tptg{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;min-height:46px;padding:6px 8px;border-radius:7px;border:1px solid var(--line);background:#1d1a16;color:var(--ink);font:inherit;font-size:.84rem;text-align:left;cursor:pointer}
  .tptg span{font-size:.72rem;color:var(--muted);width:100%}.tptg.atacar{border-color:#a8402f}.tptg.mover,.tptg.juntar{border-color:#4f7aa3}
  .tptg:hover,.tptg.on{background:#2a2414;border-color:var(--gold)}.tptg:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
  em.tpc{font-style:normal;font-weight:800;padding:0 5px;border-radius:6px;color:#140c06}
  em.tpc.good{background:#8fe08a}em.tpc.mid{background:#ffd166}em.tpc.bad{background:#ff8a76}
  .tplist{display:flex;flex-direction:column;gap:5px;margin:6px 0}
  .tprow{display:flex;align-items:center;gap:8px;min-height:46px;padding:5px 8px;border-radius:7px;border:1px solid var(--line);background:#1a1714;color:var(--ink);font:inherit;font-size:.84rem;text-align:left;cursor:pointer}
  .tprow:hover{background:#2a2414}.tprow.ord{border-left:3px solid #f3c969}.tprow:focus-visible{outline:2px solid var(--gold)}
  .tprow .tpn{flex:1;display:flex;flex-direction:column;min-width:0}.tprow .tpn small{color:var(--muted)}
  .tpmini{flex:none}
  .tpsteps{list-style:none;margin:6px 0 10px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:5px;font-family:system-ui,sans-serif;font-size:.8rem}
  .tpsteps li{display:flex;gap:6px;align-items:center;background:#1a1714;border:1px solid var(--line);border-radius:7px;padding:5px 7px}
  .tpsteps li b{flex:none;width:20px;height:20px;border-radius:50%;background:#c9a45c;color:#140c06;display:grid;place-items:center;font-size:.75rem}
  .tpthreat{list-style:none;margin:4px 0 8px;padding:0;font-size:.82rem}.tpthreat li{padding:4px 0;border-bottom:1px dashed #3a3020}
  .tptally{margin:6px 0 8px;font-family:system-ui,sans-serif;font-size:.84rem}
  .tpo-a{color:#ffd9a0}.tpo-m{color:#cfe3f5}
  .frres{margin:6px 0;padding:6px 9px;border-radius:8px;font-weight:600;border:1px solid}
  .frres.good{background:#21401c;border-color:#7fc06a;color:#dff5d2}.frres.bad{background:#4a1a14;border-color:#e0705a;color:#ffe0d8}
  b.pn{font-weight:700}
  @media (max-width:520px){ .tptgs{grid-template-columns:1fr 1fr} .tpsteps{grid-template-columns:1fr} }
  .tpthreat .linkbtn{text-align:left;font-family:system-ui,sans-serif}
/* ---------- Fase 16: HUD de movimento, ordens do mês e painel de exércitos ---------- */
.tpsteps.hud{grid-template-columns:repeat(3,1fr);gap:4px;margin:4px 0 8px}
.tpsteps.hud li{padding:4px 6px;font-size:.76rem;opacity:.6}
.tpsteps.hud li.now{opacity:1;border-color:#ffd166;background:#2a2414;box-shadow:0 0 0 1px #ffd16655}
.tpsteps.hud li.done{opacity:.85}.tpsteps.hud li.done b{background:#6fbf73}
.tppend{display:flex;flex-wrap:wrap;gap:5px;margin:4px 0 8px;font-family:system-ui,sans-serif}
.tppend.compact{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0}.tppend.compact::-webkit-scrollbar{display:none}
.tpp{display:inline-flex;align-items:stretch;border:1px solid var(--line);border-radius:999px;background:#1a1714;flex:none;overflow:hidden}
.tpp.a{border-color:#a9894a}.tpp.m{border-color:#4f7397}
.tpp button{background:none;border:0;color:var(--ink);font:inherit;font-size:.78rem;cursor:pointer;padding:5px 8px;min-height:32px;display:inline-flex;align-items:center;gap:4px}
.tpp .tpp-x{padding:0 10px;border-left:1px solid var(--line);color:#ffb3a3;font-weight:700}
.tpp button:hover{background:#2a2414}.tpp .tpp-x:hover{background:#5a1d14;color:#fff}
.tpp .pn{font-weight:700}
.tppend.compact .tpp-go>b{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tpnone{font-size:.8rem}
.tphud{position:absolute;left:6px;right:6px;bottom:6px;z-index:3;background:#140e09ee;border:1px solid #6b5a3c;border-radius:10px;padding:5px 6px;font-family:system-ui,sans-serif;max-width:640px;box-shadow:0 2px 10px #0009}
.tphud .tpsteps.hud{margin:0 0 5px}
.tphud .tpsteps.hud li{font-size:.72rem;padding:3px 5px}
.tphrow{display:flex;gap:6px;align-items:center;min-width:0}
.tpnext{flex:none;display:inline-flex;align-items:center;gap:5px;border-radius:999px;border:1px solid #c9a45c;background:#3a2e17;color:#ffe9b0;font:inherit;font-size:.8rem;font-weight:700;padding:5px 10px;min-height:34px;cursor:pointer}
.tpnext b{background:#ffd166;color:#140c06;border-radius:999px;padding:0 6px;font-size:.72rem}
.tpnext[disabled]{opacity:.65;cursor:default;border-color:#4b6b3f;background:#1d2a17;color:#bfe3a8}
.tpapanel{border:1px solid var(--line);border-radius:9px;padding:7px;background:#15130f;margin:4px 0 10px}
.tpatools{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.tpfind{flex:1 1 150px;min-width:0;background:#0f0d0b;border:1px solid var(--line);border-radius:7px;color:var(--ink);padding:7px 9px;font:inherit;font-size:.85rem}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{background:#1a1714;border:0;color:var(--muted);font:inherit;font-size:.78rem;padding:6px 9px;cursor:pointer;min-height:34px}
.seg button+button{border-left:1px solid var(--line)}
.seg button.on{background:#3a2e17;color:#ffe9b0}.seg button[disabled]{opacity:.5;cursor:default}
.tprow.idle{border-left:3px solid #6fa8dc}
.tprow[hidden]{display:none}
.xpst{color:#ffd166;font-size:.78rem;letter-spacing:-1px}
.tpxp{white-space:nowrap}.tpxp small{color:var(--muted)}.tpxp.lv2>span:not(.xpst){color:#ffd166}
.tpren{font-size:.9rem;padding:0 4px}
.tprenf{display:flex;gap:5px;margin:4px 0 8px}.tprenf input{flex:1;min-width:0;background:#0f0d0b;border:1px solid #ffd166;border-radius:7px;color:var(--ink);padding:6px 8px;font:inherit}
.tpsame{border:1px dashed var(--line);border-radius:8px;padding:6px 8px;margin:6px 0;display:flex;flex-direction:column;gap:4px}
.tpsbtns{display:flex;flex-wrap:wrap;gap:5px}
.chipbtn{background:#1f1b16;border:1px solid var(--line);border-radius:999px;color:var(--ink);font:inherit;font-size:.78rem;padding:5px 10px;min-height:32px;cursor:pointer}
.chipbtn:hover:not([disabled]){background:#2a2414;border-color:#c9a45c}.chipbtn[disabled]{opacity:.5;cursor:not-allowed}
.tpsame .why,.recruit .why{color:#ffb3a3;font-size:.78rem}
@media (max-width:600px){ .tphud{padding:4px 5px} .tphud .tpsteps.hud{grid-template-columns:1fr;margin-bottom:4px} .tphud .tpsteps.hud li:not(.now){display:none} .tpnext{font-size:.74rem;padding:4px 8px} }
  /* Fase 17: cartão do exército compacto (ordem atual + Defender, ataques em destaque, movimentos recolhidos, recrutar aqui) */
  .tpnow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:8px 0 6px}
  .tpnow .tpnowo{font-weight:600}
  .tpdef{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:999px;border:1px solid #5b8fc7;background:#1a2230;color:#cfe3f5;font:inherit;font-size:.82rem;cursor:pointer}
  .tpdef:hover:not(:disabled){background:#22304a}.tpdef.on{background:#25476e;border-color:#9cc3ea;color:#fff;cursor:default}
  .tpnow small{flex-basis:100%;font-size:.72rem}
  .tpsec{margin:6px 0;border-radius:7px}
  .tpsech{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#f0a493;font-weight:700;margin:4px 0 2px}
  .tpsec.atk{border-left:3px solid #a8402f;padding-left:7px}
  .tptgs.atk{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));margin:4px 0}
  .tptgs.atk .tptg{min-height:40px;justify-content:space-between;background:#241513}
  .tptgs.atk .tptg em.tpc{font-size:.95rem;padding:1px 7px}
  .tptg span:empty{display:none}
  details.tpsec > summary{cursor:pointer;font-size:.8rem;color:#9cc3ea;padding:3px 0;list-style:none}
  details.tpsec > summary::-webkit-details-marker{display:none}
  details.tpsec > summary::after{content:" ▸";color:var(--muted)}details.tpsec[open] > summary::after{content:" ▾"}
  details.tpsec.more > summary{color:var(--muted)}
  .tptgs.mvs{display:flex;flex-wrap:wrap;gap:5px;margin:4px 0}
  .tptgs.mvs .tptg{min-height:32px;padding:4px 9px;border-radius:999px;font-size:.8rem}
  .tptgs.mvs .tptg span{width:auto;font-size:.68rem}
  .foff{margin:4px 0 2px}.foff.off .secondary{opacity:.8}.foff small{font-size:.72rem;line-height:1.35}
  .tpgenrow{margin:6px 0;padding:5px 7px;gap:8px;flex-wrap:wrap}.tpgenrow > div{flex:1 1 140px}
  .tpgenrow select{flex:0 1 180px;min-width:0;max-width:100%;font-size:.8rem}
  .tpgen0{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#0006;color:var(--muted)}
  .tprechere{margin-top:8px;padding:6px 8px;border:1px dashed #4f7aa3;border-radius:7px;background:#121a24}
  .tprecbtns{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0}
  .tprechere small{display:block;font-size:.72rem;line-height:1.35;margin-top:2px}
  @media (max-width:520px){ .tptgs.atk{grid-template-columns:1fr 1fr} .tpgenrow select{flex-basis:100%} }
  .tptg b.tpn2{flex:1;font-weight:700;min-width:0}.tptgs.mvs .tptg b.tpn2{font-weight:600}
  .tptgs.atk .tptg{justify-content:flex-start}.tptgs.atk .tptg em.tpc{margin-left:auto}
  details.tpsec > summary small{color:var(--muted);font-size:.72rem}
.tprecbtns .chipbtn small{display:inline;margin-left:4px;opacity:.8}
/* fase 18: neste estado (unificar / dividir) */
.tpsec.here{border-left:3px solid #7be08f;padding-left:8px}
.tphere{display:flex;flex-direction:column;gap:4px;margin:4px 0}
.tphrow{display:flex;align-items:center;gap:6px;background:#1b1610;border:1px solid #3a2f22;border-radius:8px;padding:4px 6px}
.tphrow.cur{border-color:#ffd166}
.tphrow label{display:flex;align-items:center;gap:8px;flex:1;cursor:pointer;min-height:36px}
.tphrow input{width:20px;height:20px;accent-color:#7be08f;flex:none}
.tphrow .tpmini{flex:none}
.tphn{display:flex;flex-direction:column;line-height:1.2}.tphn small{opacity:.8}
.tphrow .linkbtn{font-size:18px;padding:4px 8px}
.tpmerge{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0 2px}
.tpkeep{display:flex;align-items:center;gap:6px;font-size:12px}.tpkeep select{max-width:180px}
.tpsplitrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.tpsplitrow small{flex:1;min-width:160px}
.tpmhint{display:block;margin-top:2px}
.mapbox g.tchip{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.tpact{background:#2a2218;border:1px solid #c9a24a;border-radius:8px;color:var(--ink);font:inherit;font-size:.85rem;font-weight:700;padding:7px 12px;min-height:38px;cursor:pointer}
.tpact.merge{border-color:#7be08f;background:#18291a}
.tpact:hover:not(:disabled){filter:brightness(1.2)}.tpact:disabled{opacity:.45;cursor:not-allowed}