/* css/mapa-guerra.css — Mapa de guerra: fichas dos exércitos, frentes, setas, previsão e combate. (a ordem dos arquivos no index.html importa) */
  /* mapa */
  .maplayout,.diplayout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:start}
  .diplayout{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr)}
  .maphead{display:flex;justify-content:space-between;align-items:center}
  .seg{display:inline-flex;border:1px solid var(--line);border-radius:5px;overflow:hidden}
  .seg button{background:none;border:none;color:var(--muted);padding:4px 10px;font:inherit;font-family:system-ui,sans-serif;font-size:.76rem;cursor:pointer}
  .seg button.on{background:var(--gold);color:#111}
  .mapbox path.uf.sel{stroke:#fff;stroke-width:3}
  .mapbox path.uf.contested{stroke:#ffcf6e;stroke-dasharray:4 3;stroke-width:1.6}
  /* ---- exércitos, frentes, setas ---- */
  .mapbox .fx,.mapbox .arrows{pointer-events:none}
  .mapbox path.battlefx{fill:#ff5a3a;stroke:none;opacity:0;animation:battlepulse 1.8s ease-in-out infinite}
  @keyframes battlepulse{0%,100%{opacity:0}50%{opacity:.28}}
  .mapbox path.front{fill:none;stroke:#ff6a3d;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:5 3;filter:drop-shadow(0 0 2px #ff3b1f);animation:frontmove 1.2s linear infinite}
  .mapbox path.front.hot{stroke:#ffd166;stroke-width:3}
  @keyframes frontmove{to{stroke-dashoffset:-16}}
  .mapbox path.arw{fill:none;stroke-width:3.2;stroke-linecap:round;stroke-dasharray:9 5;animation:arwflow .9s linear infinite;filter:drop-shadow(0 0 1.5px #000)}
  .mapbox path.arw.pl{stroke:#f3c969;stroke-width:3.8}
  .mapbox path.arw.mv{stroke:#cfe3f5;stroke-width:2.6}
  .mapbox path.arw.rt{stroke:#b0a898;stroke-width:2.4}
  .mapbox path.arw.en{stroke:#ff6a52;stroke-dasharray:4 4;stroke-width:3}
  .mapbox path.arw.fade{opacity:0;transition:opacity .6s}
  @keyframes arwflow{to{stroke-dashoffset:-28}}
  .mapbox svg.small path.arw{stroke-width:4.6}.mapbox svg.small path.arw.pl{stroke-width:5.4}.mapbox svg.small path.front{stroke-width:3.4}
  .mapbox g.cnt{cursor:pointer}
  .mapbox g.cnt rect.bg{stroke:#0b0a09;stroke-width:1;filter:drop-shadow(0 1px 1.5px #000c)}
  .mapbox g.cnt.p rect.bg{fill:#2f5f8f}.mapbox g.cnt.e rect.bg{fill:#9a3526}
  .mapbox g.cnt .sym{fill:none;stroke:#e9eef3;stroke-width:1.1}
  .mapbox g.cnt.ord rect.bg{stroke:#f3c969;stroke-width:1.4}
  .mapbox g.cnt.sel rect.bg{stroke:#fff;stroke-width:2.2;animation:selglow 1s ease-in-out infinite alternate}
  @keyframes selglow{to{stroke:#f3c969}}
  .mapbox g.cnt:hover rect.bg{stroke:#fff}
  .mapbox text.cn{font-size:10px;font-weight:800;stroke:none;fill:#fff;text-anchor:middle;dominant-baseline:middle}
  .mapbox circle.badge{fill:#f3c969;stroke:#0b0a09;stroke-width:.8}
  .mapbox text.cb{font-size:7px;font-weight:800;stroke:none;fill:#1a1408;text-anchor:middle;dominant-baseline:middle}
  .mapbox g.cnt.fade{opacity:.15;transition:opacity .5s}
  .mapbox g.cnt.ghost{transition:transform 1.1s ease-in-out;pointer-events:none}
  .mapbox path.uf.tgt{stroke-width:2.4;animation:tgtpulse 1s ease-in-out infinite alternate}
  .mapbox path.uf.tgt-atacar{stroke:#ff5a3a}.mapbox path.uf.tgt-mover,.mapbox path.uf.tgt-recuar{stroke:#8fc8ff}
  .mapbox path.uf.origin{stroke:#fff;stroke-width:2.6}
  @keyframes tgtpulse{from{stroke-opacity:.45}to{stroke-opacity:1}}
  /* ---- Fase 2 · mapa e combate ---- */
  .maplayout.war{grid-template-columns:minmax(0,1.75fr) minmax(280px,1fr)}
  .maplayout.big{grid-template-columns:minmax(0,1fr)}
  .maplayout.big #mapMain svg{max-height:84vh;width:auto;max-width:100%;margin:0 auto}
  .maphead .mhr{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
  .mapbox g.cnt rect.bg{stroke:#0b0a09;stroke-width:1.2}
  .mapbox g.cnt.p rect.bg{fill:#2a5d93}.mapbox g.cnt.e rect.bg{fill:#a3301f}
  .mapbox g.cnt .sym{stroke-width:1.2}
  .mapbox text.cn{font-size:12.5px;font-weight:800}
  .mapbox g.cnt rect.sb0{fill:#0008}.mapbox g.cnt.p rect.sb{fill:#bfe0ff}.mapbox g.cnt.e rect.sb{fill:#ffc2b5}
  .mapbox g.cnt path.ordmk{fill:#f3c969}
  .mapbox circle.badge{r:5}.mapbox text.cb{font-size:7.5px}
  .mapbox path.frontcase{fill:none;stroke:#1a0b06;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
  .mapbox path.front{stroke-width:3.2}
  .mapbox svg.small path.frontcase{stroke-width:8}
  .mapbox path.uf.pend{stroke:#fff;stroke-width:3.2;animation:none}
  .mapbox path.arw.pv{stroke-width:5;stroke-dasharray:3 6;animation:arwflow .5s linear infinite;opacity:.95}
  .milleg{display:flex;flex-wrap:wrap;gap:6px 14px;font-family:system-ui,sans-serif;font-size:.76rem;color:var(--muted);margin-top:6px}
  .milleg span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
  .mapbox .milleg svg{width:auto;height:14px;flex:none;display:inline-block}
  .maplayout.big .fcard{top:120px;bottom:auto;width:240px}
  .milleg svg text{font-family:system-ui,sans-serif;fill:#fff;text-anchor:middle;dominant-baseline:middle;font-size:12.5px;font-weight:800}
  .milleg g.cnt rect.bg{stroke:#0b0a09}.milleg g.cnt.p rect.bg{fill:#2a5d93}.milleg g.cnt.e rect.bg{fill:#a3301f}.milleg g.cnt .sym{fill:none;stroke:#e9eef3;stroke-width:1.2}
  .milleg rect.sb0{fill:#0008}.milleg .p rect.sb{fill:#bfe0ff}.milleg .e rect.sb{fill:#ffc2b5}
  .fcard{position:absolute;left:6px;bottom:52px;width:min(300px,46%);background:#14110ef2;border:1px solid var(--gold);border-left-width:4px;border-radius:8px;padding:10px 12px;font-family:system-ui,sans-serif;font-size:.8rem;box-shadow:0 8px 24px #000a;z-index:3}
  .fcard.good{border-left-color:#6fae6a}.fcard.mid{border-left-color:#e0b04a}.fcard.bad{border-left-color:#d0583e}.fcard.mv{border-left-color:#8fc8ff}
  .fcard .fch{display:flex;justify-content:space-between;gap:8px;align-items:baseline;margin-bottom:4px}
  .fcard .fch b{font-size:.98rem;color:var(--gold)}.fcard .fch span{color:var(--muted);font-size:.74rem}
  .fcard .fodds{margin:2px 0 4px}.fcard.good .fodds b{color:#8fd08a}.fcard.mid .fodds b{color:#f0c35a}.fcard.bad .fodds b{color:#ff8a70}
  .fcard p{margin:5px 0;line-height:1.35}.fcard .fslot{color:var(--muted);font-size:.74rem}
  .fcard .pw{display:flex;align-items:center;gap:6px;font-size:.74rem}.fcard .pw .bar2{flex:1;display:flex;height:8px;border-radius:4px;overflow:hidden;background:#0006}
  .fcard .pw .bar2 i.p{background:#5d8fc4}.fcard .pw .bar2 i.e{background:#c2563f}
  .fcard .fmods{margin:4px 0;padding-left:16px;font-size:.74rem}.fcard .fmods li.up b{color:#8fd08a}.fcard .fmods li.down b{color:#ff8a70}
  .fcard .fbtns{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 4px}.fcard .fbtns .primary{padding:7px 12px}
  @media (max-width:900px){ .maplayout.war{grid-template-columns:minmax(0,1fr)} }
  .sidepanel .fcard{position:static;width:auto;margin:0 0 14px;animation:fcin .25s ease-out}
  @keyframes fcin{from{opacity:0;transform:translateY(-6px)}}
  @media (max-width:900px){ .fcard{position:static;width:auto;margin:8px 0 0} }

  .mapbox path.uf.flipfx{animation:flipflash .9s ease}
  @keyframes flipflash{0%{filter:brightness(1)}25%{filter:brightness(2.6)}100%{filter:brightness(1)}}
  .mapbox g.boom .fl{animation:boomfl .7s ease-out forwards}
  .mapbox g.boom .sm{opacity:0;animation:smoke 1.8s ease-out forwards}
  .mapbox g.boom .s2{animation-delay:.15s}.mapbox g.boom .s3{animation-delay:.3s}
  @keyframes boomfl{0%{transform:scale(.2);opacity:1}60%{opacity:.9}100%{transform:scale(1.6);opacity:0}}
  @keyframes smoke{0%{opacity:0;transform:translateY(0) scale(.5)}25%{opacity:.85}100%{opacity:0;transform:translateY(-14px) scale(1.7)}}
  .maphint{font-size:.8rem;color:var(--muted);margin:2px 0 6px;font-family:system-ui,sans-serif}
  .maphint .hl-a{color:#ff7a5c}.maphint .hl-m{color:#8fc8ff}
  .ordchip{background:#1d1a15;border:1px solid var(--gold);color:var(--gold);border-radius:14px;padding:3px 10px;font-size:.78rem;cursor:pointer;font-family:system-ui,sans-serif;margin-left:auto;margin-right:8px}
  .ordchip.full{border-color:var(--red);color:#ff9d8a}
  .hudarmy{cursor:pointer}
  i.nato{display:inline-block;width:18px;height:12px;border:1px solid #e9eef3;border-radius:1px;flex:none;vertical-align:-1px;margin-right:6px;background-color:#2f5f8f;
    background-image:linear-gradient(to top right,transparent calc(50% - .7px),#e9eef3 50%,transparent calc(50% + .7px)),linear-gradient(to bottom right,transparent calc(50% - .7px),#e9eef3 50%,transparent calc(50% + .7px))}
  i.nato.e{background-color:#9a3526}
  i.nato.m{opacity:.6;border-style:dashed}
  .armyh{display:flex;align-items:center}
  .ordhead{display:flex;justify-content:space-between;align-items:baseline;margin:12px 0 6px;font-family:system-ui,sans-serif;font-size:.86rem;color:var(--gold)}
  .ordhead span{color:var(--muted);font-size:.78rem}.ordhead span.neg{color:#ff9d8a}
  .armylist{display:flex;flex-direction:column;gap:5px}
  .armyrow{display:flex;align-items:center;gap:4px;text-align:left;background:#14120f;border:1px solid var(--line);border-left:3px solid #4f7aa3;color:var(--ink);padding:7px 9px;border-radius:5px;cursor:pointer;font-family:system-ui,sans-serif;font-size:.84rem}
  .armyrow:hover{background:#211d18}.armyrow.has{border-left-color:var(--gold)}.armyrow.mil{cursor:default;border-left-color:#555;opacity:.85}
  .armyrow span{display:flex;flex-direction:column;flex:1;min-width:0}.armyrow small{color:var(--muted);font-size:.74rem}
  .armyrow em{font-style:normal;font-size:.74rem;color:var(--gold);white-space:nowrap}
  .ordbox p{font-size:.8rem}
  .tglist{display:flex;flex-direction:column;gap:5px;margin:6px 0 10px}
  .tglist .tgt{display:flex;flex-direction:column;text-align:left;background:#14120f;border:1px solid var(--line);border-left:3px solid #8fc8ff;color:var(--ink);padding:8px 10px;border-radius:5px;cursor:pointer;font-family:system-ui,sans-serif;font-size:.86rem}
  .tglist .tgt.atacar{border-left-color:#ff5a3a}.tglist .tgt.on{background:#2a2216;border-color:var(--gold)}
  .tglist .tgt small{color:var(--muted);font-size:.74rem}
  .intents{margin:0 0 8px;padding-left:18px;font-size:.82rem;color:#f0a593;font-family:system-ui,sans-serif}
  .frontlist{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
  button.small{padding:5px 9px;font-size:.78rem}
  body.noscroll{overflow:hidden}
  .overlay{position:fixed;inset:0;background:#000c;z-index:40;display:flex;align-items:center;justify-content:center;padding:12px;animation:fadein .25s}
  @keyframes fadein{from{opacity:0}}
  .bmodal,.rmodal{font-size:15px;background:var(--panel2,#191612);border:1px solid var(--gold);border-radius:10px;width:min(860px,100%);max-height:94vh;overflow:auto;padding:16px 18px;font-family:system-ui,sans-serif;box-shadow:0 10px 40px #000}
  .rmodal{width:min(720px,100%)}
  .btop{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
  .btop h2{margin:2px 0;color:var(--gold);font-weight:normal;font-family:Georgia,serif}
  .xbtn{background:none;border:1px solid var(--line);color:var(--ink);border-radius:50%;width:32px;height:32px;cursor:pointer}
  .bfield{display:grid;grid-template-columns:1fr 92px 1fr;gap:10px;margin:12px 0;align-items:start}
  .bside{position:relative;background:#14120f;border:1px solid var(--line);border-radius:8px;padding:10px;overflow:hidden;transition:box-shadow .3s}
  .bside.p{border-top:3px solid #4f7aa3}.bside.e{border-top:3px solid #a8402f}
  .bside.won{box-shadow:0 0 0 2px var(--gold),0 0 18px #c9a45c55}
  .bside.hit{animation:shake .45s}
  @keyframes shake{0%,100%{transform:none}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}
  .bhead{font-weight:700;margin-bottom:8px;display:flex;justify-content:space-between;align-items:baseline}.bhead small{color:var(--muted);font-weight:400}
  .bunit{margin-bottom:9px}.bunit.mil{opacity:.85}
  .bname{display:flex;align-items:center;gap:2px;font-size:.85rem}.bgen{color:var(--muted);padding-left:24px;font-size:.74rem}
  .bbar{position:relative;height:12px;background:#2a251f;border-radius:3px;margin-top:3px;overflow:hidden}
  .bbar i{position:absolute;left:0;top:0;bottom:0;transition:width .6s ease}
  .bside.p .bbar.str i{background:#5d8fc4}.bside.e .bbar.str i{background:#c2563f}.bbar.org i{background:#c9a45c}
  .bbar.org{height:8px}
  .bbar em{position:absolute;right:4px;top:-1px;font-style:normal;font-size:.68rem;color:#fff;text-shadow:0 0 2px #000}
  .bbar.org em{top:-3px;font-size:.6rem}
  .bmods{list-style:none;padding:0;margin:8px 0 0;font-size:.76rem}
  .bmods li{display:flex;justify-content:space-between;border-top:1px dashed #3a332a;padding:3px 0;color:var(--muted)}
  .bmods li.up b{color:#8fc488}.bmods li.down b{color:#ff8a72}
  .bfx{position:absolute;inset:0;pointer-events:none}
  .bfx .puff{position:absolute;width:46px;height:46px;margin:-23px;border-radius:50%;background:radial-gradient(circle,#d8d2c6cc,#6d665c00 70%);animation:puff 1.4s ease-out forwards}
  .bfx .flash{position:absolute;width:60px;height:60px;margin:-30px;border-radius:50%;background:radial-gradient(circle,#fff6d0,#ffb347cc 35%,#ff5a2a00 70%);animation:bflash .6s ease-out forwards}
  @keyframes puff{0%{opacity:0;transform:scale(.4)}20%{opacity:.9}100%{opacity:0;transform:translateY(-26px) scale(1.8)}}
  @keyframes bflash{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(1.5)}}
  .bmid{text-align:center;padding-top:24px}.bmid .vs{font-size:1.6rem;color:var(--gold);font-family:Georgia,serif}
  .bround{color:var(--muted);font-size:.8rem;margin-top:8px}.bround b{color:var(--ink);font-size:1.05rem}
  .bresult{min-height:0;opacity:0;transition:opacity .4s;text-align:center;padding:10px;border-radius:6px;background:#14120f;border:1px solid var(--line);font-size:.92rem}
  .bresult.show{opacity:1}.bresult.good{border-color:#6fae6a}.bresult.good b{color:#8fc488}.bresult.bad{border-color:#a8402f}.bresult.bad b{color:#ff8a72}
  .bbtns{display:flex;gap:8px;justify-content:flex-end;margin-top:12px;flex-wrap:wrap}