/* css/mapa-frentes.css — Mapa de guerra de 2022: fichas dos exércitos, destinos com a chance, setas das ordens, lados sombreados, capital e redutos. */
  /* papel envelhecido + grade de meridianos discreta (só CSS, sem filtros) */
  .mapbox svg.fmap{background:radial-gradient(ellipse at 55% 45%,#2c2419 0%,#1b1610 60%,#120e0a 100%),repeating-linear-gradient(0deg,transparent 0 39px,#e8d9b40a 39px 40px),repeating-linear-gradient(90deg,transparent 0 39px,#e8d9b40a 39px 40px);background-blend-mode:normal;border-radius:8px;box-shadow:inset 0 0 40px #000a}
  .mapbox svg.fmap path.uf{stroke:#15100b;stroke-width:1.1;stroke-linejoin:round}
  .mapbox svg.fmap path.uf:hover{stroke:#fff3c4;stroke-width:1.8}
  /* faixas dos lados perto da linha */
  .mapbox .funder{pointer-events:none}
  .mapbox path.fband{fill:none;stroke-width:34;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
  .mapbox svg.small path.fband{stroke-width:36}
  .mapbox path.foccup{stroke:none;opacity:.75}
  /* linha mais grossa e com brilho */
  .mapbox svg.fmap path.frontcase{stroke-width:8.5}
  .mapbox svg.fmap path.front{stroke-width:4.2}
  .mapbox svg.fmap.small path.frontcase{stroke-width:10}.mapbox svg.fmap.small path.front{stroke-width:5}
  /* fichas dos exércitos (OTAN): azul = seu (retângulo com X), vermelho = inimigo (losango); número = força, barrinha = moral */
  .mapbox g.tchip{cursor:pointer;outline:none}
  g.tchip rect.bg{stroke-width:1.6;filter:drop-shadow(0 1px 2px #000c)}
  g.tchip.p rect.bg{fill:#1f4f86;stroke:#cfe6ff}g.tchip.e rect.bg{fill:#8d2416;stroke:#ffd0c4}
  body.cb g.tchip.p rect.bg{fill:#0072B2}body.cb g.tchip.e rect.bg{fill:#D55E00}
  g.tchip .sym{fill:none;stroke:#fff;stroke-width:1.2}
  g.tchip text.cn{font-size:11.5px;font-weight:900;fill:#fff;text-anchor:middle;dominant-baseline:middle;font-variant-numeric:tabular-nums}
  g.tchip .mb0{fill:#0008}g.tchip .mb{fill:#8fe08a}
  g.tchip .ordmk{fill:#f3c969}
  g.tchip .gs circle{fill:#1a140e;stroke:#f3c969;stroke-width:1}g.tchip .gs text{font-size:6.5px;fill:#f3c969;text-anchor:middle;dominant-baseline:middle}
  g.tchip text.spk{font-size:8px}
  .mapbox g.tchip.p:hover rect.bg,.mapbox g.tchip:focus-visible rect.bg{stroke:#ffd166;stroke-width:2.4}
  .mapbox g.tchip.sel rect.bg{stroke:#ffd166;stroke-width:2.6}
  .mapbox g.tchip rect.ring{fill:none;stroke:#ffd166;stroke-width:1.6;stroke-dasharray:4 3;animation:tring 1.2s linear infinite}
  @keyframes tring{to{stroke-dashoffset:-14}}
  .mapbox g.tchip.dim{opacity:.6}
  /* fase 18: exércitos lado a lado; marcado para unificar = moldura verde e ✓ */
  .mapbox g.tchip.mk rect.bg{stroke:#7be08f;stroke-width:2.6}
  g.tchip .mkc circle{fill:#7be08f;stroke:#10240f;stroke-width:1}g.tchip .mkc text{font-size:7px;font-weight:900;fill:#10240f;text-anchor:middle;dominant-baseline:middle}
  g.tchip text.xps{font-size:6.5px;fill:#ffd166;text-anchor:middle;paint-order:stroke;stroke:#140c06;stroke-width:1.6px}
  /* destinos do exército selecionado: estados destacados e a chance (%) */
  .mapbox path.ttg{stroke-width:2.2;cursor:pointer;stroke-linejoin:round}
  .mapbox path.ttg.atacar{fill:#ff5a42;fill-opacity:.28;stroke:#ffb4a6;animation:ttg 1.3s ease-in-out infinite}
  .mapbox path.ttg.mover,.mapbox path.ttg.juntar{fill:#9fd0ff;fill-opacity:.24;stroke:#cfe6ff;stroke-dasharray:4 2}
  .mapbox path.ttg:hover{fill-opacity:.42}
  .mapbox path.ttg.pend{fill:#ffd166;fill-opacity:.42;stroke:#ffd166;stroke-width:3;stroke-dasharray:none;animation:none}
  @keyframes ttg{0%,100%{stroke-opacity:.55}50%{stroke-opacity:1}}
  .mapbox path.tsrc{fill:#ffd166;fill-opacity:.14;stroke:#ffd166;stroke-width:1.6;pointer-events:none}
  .mapbox path.thot{fill:#ffb347;fill-opacity:.35;stroke:#fff2b0;stroke-width:2.4;pointer-events:none;animation:thot .5s ease-in-out infinite alternate}
  @keyframes thot{from{fill-opacity:.15}to{fill-opacity:.55}}
  .mapbox g.tpct{cursor:pointer;outline:none}
  g.tpct rect{stroke:#140c06;stroke-width:1.2;filter:drop-shadow(0 1px 2px #000c)}
  body svg g.tpct text{font-size:9.5px;font-weight:900;text-anchor:middle;dominant-baseline:middle;fill:#140c06;stroke:none;paint-order:normal}
  g.tpct.good rect{fill:#8fe08a}g.tpct.mid rect{fill:#ffd166}g.tpct.bad rect{fill:#ff8a76}g.tpct.mv rect{fill:#cfe6ff}
  .mapbox g.tpct.pend rect{stroke:#fff;stroke-width:2.2}
  .mapbox g.tpct:focus-visible rect{stroke:#fff;stroke-width:2.6}
  /* setas grossas das ordens: amarelo = ataque, azul-claro = movimento, vermelho tracejado = plano inimigo, branco = prévia */
  .mapbox g.tarw{pointer-events:none}
  .mapbox g.tarw path{fill:none;stroke-linecap:round;stroke-linejoin:round}
  .mapbox g.tarw path.cs{stroke:#140c06;stroke-width:6.5;opacity:.75}
  .mapbox g.tarw path.ln{stroke-width:4}
  .mapbox svg.small g.tarw path.cs{stroke-width:8}.mapbox svg.small g.tarw path.ln{stroke-width:5}
  .mapbox g.tarw.pl path.ln{stroke:#f3c969}.mapbox g.tarw.mv path.ln{stroke:#cfe3f5}
  .mapbox g.tarw.en path.ln{stroke:#ff5a42;stroke-dasharray:7 4;animation:tdash 1s linear infinite}
  .mapbox g.tarw.pv path.ln{stroke:#fff2b0;stroke-dasharray:6 4;animation:tdash .8s linear infinite}
  @keyframes tdash{to{stroke-dashoffset:-22}}
  body.rm .mapbox :is(g.tarw path.ln,path.ttg,path.thot,g.tchip rect.ring){animation:none}
  @media (prefers-reduced-motion:reduce){.mapbox :is(g.tarw path.ln,path.ttg,path.thot,g.tchip rect.ring){animation:none}}
  /* placar sobre o mapa e cartão de confirmação flutuante (celular) */
  .mapbox .tpmaptally{position:absolute;top:6px;left:6px;z-index:3;background:#140e09e6;border:1px solid #6b5a3c;border-radius:9px;padding:4px 9px;font-size:.8rem;color:#f3e2b8;display:flex;flex-direction:column;gap:1px;max-width:62%;pointer-events:none}
  .mapbox .tpmaptally small{color:#bfe3a8}
  .mapbox .tpfloat{position:absolute;left:6px;right:6px;bottom:6px;z-index:4}
  .tpconf{margin:8px 0;padding:9px 10px;border-radius:10px;background:#1a140ef2;border:2px solid #6b5a3c;box-shadow:0 4px 16px #000a;font-family:system-ui,sans-serif;font-size:.86rem}
  .tpconf.good{border-color:#7fc06a}.tpconf.mid{border-color:#e6b84a}.tpconf.bad{border-color:#e0705a}
  .tpconf .tpbig{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.tpconf .tpbig b{font-size:2rem;line-height:1}
  .tpconf.good .tpbig b{color:#8fe08a}.tpconf.mid .tpbig b{color:#ffd166}.tpconf.bad .tpbig b{color:#ff8a76}
  .tpconf p{margin:4px 0}.tpconf ul{margin:4px 0 6px;padding-left:18px;font-size:.84rem}
  .tpconf .row2{display:flex;gap:6px}.tpconf .row2 button{min-height:44px;flex:1}
  /* capital e redutos */
  .mapbox g.fgoal{pointer-events:none}
  .mapbox g.fgoal.cap path{fill:#f3c969;stroke:#1a1408;stroke-width:1}
  .mapbox g.fgoal.goal path.big{fill:#e0412f;stroke:#fff;stroke-width:1.1;filter:drop-shadow(0 0 2px #000a)}
  .mapbox g.fgoal text.fglbl{font-size:8.5px;font-weight:800;fill:#ffe9b8;stroke:#140a05;stroke-width:2.6px;paint-order:stroke;dominant-baseline:middle;letter-spacing:.1px}
  .mapbox g.fgoal.cap text.fglbl{fill:#f3c969;font-size:7.5px}
  /* Fase 12: caminho mais curto até a capital inimiga (discreto) */
  .mapbox polyline.frota{fill:none;stroke:#ffe08a;stroke-width:1.6;stroke-dasharray:3.5 3;stroke-linecap:round;stroke-linejoin:round;opacity:.8;pointer-events:none;animation:frota 1.6s linear infinite}
  @keyframes frota{to{stroke-dashoffset:-13}}
  body.rm .mapbox polyline.frota{animation:none}
  @media (prefers-reduced-motion:reduce){.mapbox polyline.frota{animation:none}}
  /* "Recife a N estados" e a distância do inimigo até Brasília */
  .fpath{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.82rem;margin:4px 0 2px}.fpath .good{color:#bfe3a8}.fpath .bad{color:#f0a493}
  .fleg span{white-space:nowrap}
  .fcard2.flash{animation:fcflash 1.5s ease}
  @keyframes fcflash{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 3px #f3c969,0 0 18px #f3c96988}}
  /* Fase 14: cerco (moldura tracejada + cadeado), bônus de flanco no destino, alvo final (Recife) */
  .mapbox g.tchip rect.cutr{fill:none;stroke:#ff5a42;stroke-width:1.6;stroke-dasharray:3 2}
  g.tchip text.cutk{font-size:7.5px}
  .mapbox g.tchip.cut rect.bg{opacity:.82}
  g.tpct .flk rect{fill:#f3c969;stroke:#140c06;stroke-width:1}
  body svg g.tpct .flk text{font-size:6.6px}
  .mapbox path.ttg.final{stroke:#fff;stroke-width:3}
  .mapbox g.tpct.final rect{stroke:#fff;stroke-width:2}
  /* ímpeto: barra de 7 casas */
  .tpmom{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0;font-size:.84rem}
  .tpmom .mombar{display:inline-flex;gap:2px}.tpmom .mombar i{width:11px;height:9px;border-radius:2px;background:#3a3127}
  .tpmom .mombar i.c{background:#6b5a3c}.tpmom .mombar i.on.up{background:#8fe08a}.tpmom .mombar i.on.dn{background:#ff8a76}
  .tpmom.up b{color:#bfe3a8}.tpmom.dn b{color:#f0a493}
  /* avisos de cerco */
  .tpcut{list-style:none;margin:4px 0 8px;padding:0;font-size:.82rem}.tpcut li{margin:2px 0}
  .tpcut li.bad .linkbtn{color:#ffb4a6}.tpcut li.good .linkbtn{color:#bfe3a8}
  .tpconf li.good{color:#bfe3a8}.tpconf li.bad{color:#ffb4a6}.tpconf li.tip{color:#f3e2b8;list-style:none;margin-left:-16px}
  /* Batalha de Recife: escolha da tática */
  .tpconf.final{border-width:3px;background:linear-gradient(180deg,#2a1610f2,#1a140ef2)}
  .tpconf h4.tprec,.tprec2{margin:2px 0 6px;color:#ffd166;font-weight:800}
  .tptat{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:6px;margin:4px 0 6px}
  .tptat .tptb{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:7px 9px;min-height:44px;border-radius:9px;background:#241b12;border:2px solid #6b5a3c;color:#f3e2b8;cursor:pointer}
  .tptat .tptb.on{border-color:#ffd166;background:#3a2a14;box-shadow:0 0 0 2px #ffd16655}
  .tptat .tptb small{font-size:.74rem;opacity:.85}.tptat .tptb em{font-style:normal;font-weight:900}
  .frdrama{margin:4px 0;font-weight:800;color:#ffd166;font-size:1rem}
  /* animação: frases dramáticas e as três fases de Recife */
  .rcap.final{font-weight:800;color:#ffd166}.rcap.final.big{font-size:1.25rem}.rcap.final.good{color:#8fe08a}
  .rcap.shake{animation:rshake .5s ease 2}
  @keyframes rshake{0%,100%{transform:none}20%{transform:translateX(-4px) scale(1.03)}40%{transform:translateX(4px)}60%{transform:translateX(-2px)}}
  body.rm .rcap.shake{animation:none}
  @media (prefers-reduced-motion:reduce){.rcap.shake{animation:none}}
  /* tela "Recife caiu!" */
  .overlay.rvic{background:radial-gradient(circle at 50% 40%,#5a3a10ee,#0d0906f5 70%);z-index:60}
  .rvbox{max-width:440px;margin:12vh auto 0;text-align:center;padding:24px 20px;border-radius:16px;background:#1a140ef2;border:3px solid #ffd166;box-shadow:0 0 60px #ffd16655;animation:rvin .7s cubic-bezier(.2,1.4,.4,1)}
  .rvbox h2{font-size:2.1rem;margin:6px 0;color:#ffd166;letter-spacing:.5px}.rvbox p{font-size:1.02rem;margin:6px 0 16px}
  .rvbox .rvburst{font-size:3.4rem;animation:rvpulse 1.4s ease-in-out infinite}
  .rvbox button{min-height:48px;padding:0 22px;font-size:1.05rem}
  @keyframes rvin{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
  @keyframes rvpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
  body.rm .rvbox,body.rm .rvbox .rvburst{animation:none}
  @media (prefers-reduced-motion:reduce){.rvbox,.rvbox .rvburst{animation:none}}
  /* Fase 17: siglas do Nordeste pequeno dentro do estado (sem linha até o mar) */
  .mapbox text.ne{font-size:8px;stroke-width:2.2px}
  @media (max-width:600px){ .mapbox text.ne{font-size:11px;stroke-width:3px} }
  .mapbox svg.zoomed text.ne{font-size:12px;stroke-width:3px}
  @media (max-width:600px){ .mapbox svg.zoomed text.ne{font-size:17px;stroke-width:4px} }