/* ═══════════════════════════════════════════════════════════
   ⇅ KG-SWAP — botões INVERTE + COPIA entre os 2 frames do card
   (RENDER ROLL). Minimalista: só CONTORNO, sem cor de marca.
   Um em cima do outro, centrado no meio dos frames.
   Lógica: kg-swap.js (DataTransfer → escreve no <input file>).
   ═══════════════════════════════════════════════════════════ */
.kg-swap{
  flex:0 0 auto;              /* item do flex .kg-frames — não estica */
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:0 2px; align-self:center;
}
.kg-swapb{
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid rgba(255,255,255,.22); border-radius:50%;
  color:#c9c9d2; cursor:pointer;
  transition:border-color .15s ease, color .15s ease, transform .15s ease;
}
.kg-swapb:hover{ border-color:rgba(255,255,255,.55); color:#fff; transform:scale(1.06); }
.kg-swapb:active{ transform:scale(.92); }
.kg-swapb svg{ width:16px; height:16px; display:block; }
.kg-swapb.kg-spin{ animation:kgSpin .4s ease; }
@keyframes kgSpin{ 50%{ transform:rotate(180deg); } }

@media(max-width:760px){
  .kg-swapb{ width:30px; height:30px; }
  .kg-swapb svg{ width:15px; height:15px; }
}