/* ============================================================================
   Formation
   ----------------------------------------------------------------------------
   A battlefield with standing spots on it, not a grid of slots. The shape the
   player builds here is literally the shape they will see fighting, so the
   spots mirror the battlefield's own anchors.

   Depends on tokens.css and kit.css.
   ========================================================================== */

.fm { padding: 0 0 var(--s6); }

.fm-head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
}
.fm-head .kit-btn.icon.sm { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
.fm-head .kit-btn.icon.sm::before { content: ''; position: absolute; inset: -4px; }

.fm-title {
  flex: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fz-title);
  color: var(--text-cream);
}

.fm-power {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--rad-pill);
  background: var(--panel-sunken);
  box-shadow: var(--carve);
  font-family: var(--font-num);
  font-weight: 700;
  font-size: var(--fz-small);
  color: var(--gold-200);
}

/* --- the field -------------------------------------------------------------- */

.fm-field {
  position: relative;
  height: 320px;
  margin: 0 var(--s3);
  border-radius: var(--rad-lg);
  background-size: cover;
  background-position: center 38%;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 var(--frame-w) var(--gold-800),
    inset 0 -60px 70px rgba(4, 6, 12, 0.72),
    var(--shelf-md) var(--gold-800),
    var(--cast-md);
}

.fm-slot {
  position: absolute;
  translate: -50% 0;
  z-index: var(--z, 1);
  display: grid;
  justify-items: center;
  width: 70px;
  cursor: pointer;
}

/* The spot on the ground: an ellipse, because the field is seen at an angle
   and a circle would read as a sticker lying on top of the painting. */
.fm-pad {
  position: absolute;
  bottom: 0;
  width: 54px;
  height: 19px;
  border-radius: 50%;
  border: 2px dashed rgba(255, 226, 170, 0.45);
  background: radial-gradient(60% 70% at 50% 40%, rgba(255, 214, 140, 0.2), transparent 72%);
  transition: all var(--t-quick) var(--ease-out);
}
.fm-slot.filled .fm-pad {
  border-style: solid;
  border-color: rgba(255, 226, 170, 0.75);
  background: radial-gradient(60% 70% at 50% 40%, rgba(255, 214, 140, 0.42), transparent 72%);
}

.fm-fig {
  position: relative;
  height: 96px;
  width: auto;
  margin-bottom: 8px;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 6px 7px rgba(0, 0, 0, 0.6));
}
.fm-slot.back .fm-fig {
  height: 78px;
  filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.6)) brightness(0.86);
}

.fm-empty {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 10px;
  border-radius: 50%;
  color: rgba(255, 226, 170, 0.5);
  background: rgba(8, 11, 18, 0.5);
}

/* Under the pad, not under the figure — two slots standing close together
   would otherwise print their names across each other's legs. */
.fm-slot-name {
  position: absolute;
  bottom: -14px;
  padding: 0 6px;
  border-radius: var(--rad-pill);
  background: rgba(6, 8, 14, 0.82);
  font-size: 0.62rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* While a hero is in the air, every spot shows it will take them. */
.fm.is-dragging .fm-pad {
  border-color: var(--gold-200);
  background: radial-gradient(60% 70% at 50% 40%, rgba(255, 214, 140, 0.35), transparent 72%);
  animation: fm-await 1s var(--ease-out) infinite;
}
@keyframes fm-await {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

.fm-slot.is-target .fm-pad {
  border-color: #fff;
  background: radial-gradient(60% 70% at 50% 40%, rgba(255, 240, 200, 0.7), transparent 72%);
  scale: 1.18;
}

/* The landing: the figure drops in and the dust puffs out. */
.fm-slot.is-landing .fm-fig { animation: fm-land 420ms var(--ease-back); }
@keyframes fm-land {
  0% { transform: translateY(-26px) scale(1.12); }
  60% { transform: translateY(0) scale(0.94); }
  100% { transform: none; }
}
.fm-slot.is-landing .fm-pad::after {
  content: '';
  position: absolute;
  inset: -10px -16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 236, 190, 0.8);
  animation: fm-dust 460ms var(--ease-out) forwards;
}
@keyframes fm-dust {
  0% { opacity: 0.9; transform: scale(0.4); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* The card being dragged. Fixed so it can leave the bench's scroll box. */
.fm-ghost {
  position: fixed;
  z-index: var(--z-toast);
  pointer-events: none;
  scale: 1.12;
  rotate: -4deg;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.7));
  opacity: 0.95;
}
.kit-hero.is-lifted { opacity: 0.3; }

/* --- faction bond ------------------------------------------------------------ */

.fm-bonus {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: var(--s3) var(--s3) 0;
  padding: var(--s2) var(--s3);
  border-radius: var(--rad-md);
  background: var(--panel-sunken);
  box-shadow: var(--carve);
}

.fm-bonus-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  filter: grayscale(1) brightness(0.6);
  transition: filter var(--t-quick) var(--ease-out);
}
.fm-bonus-mark.is-empty { opacity: 0.4; }
.fm-bonus-mark.is-on {
  filter: none;
  background: color-mix(in srgb, var(--f) 22%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--f) 55%, transparent);
  animation: kit-rar-pulse 2.4s var(--ease-out) infinite;
}

.fm-bonus-n {
  position: absolute;
  right: -2px;
  bottom: -2px;
  min-width: 14px;
  padding: 0 3px;
  border-radius: var(--rad-pill);
  background: rgba(6, 8, 14, 0.9);
  font-size: 0.56rem;
  color: var(--text-muted);
}

.fm-bonus-text {
  margin-left: auto;
  font-size: var(--fz-tiny);
  color: var(--text-dim);
  text-align: right;
}

/* --- controls and bench -------------------------------------------------------- */

.fm-controls { display: flex; gap: var(--s2); margin: var(--s3) var(--s3) 0; }

.fm-bench-wrap { margin: var(--s4) var(--s3) 0; }
.fm-bench-head {
  margin: 0 0 var(--s2);
  font-family: var(--font-display);
  font-size: var(--fz-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 600;
}

/* Six across, square, nameless — the surveyed bench. Here the convention
   does transfer, because a bench is not a roster: you are picking a face to
   drag, the name is on the card once it lands, and every row the bench gives
   back is a row the battlefield above gets to use. */
.fm-bench {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 5px;
  touch-action: none;      /* the grid is a drag surface */
}
.fm-bench .kit-hero.is-fielded { opacity: 0.45; }

.fm-tip {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: var(--s3) var(--s3) 0;
  font-size: var(--fz-small);
  line-height: 1.4;
  color: var(--text-dim);
}
.fm-tip .gi { flex: none; margin-top: 1px; }

@media (prefers-reduced-motion: reduce) {
  .fm.is-dragging .fm-pad, .fm-slot.is-landing .fm-fig,
  .fm-slot.is-landing .fm-pad::after, .fm-bonus-mark.is-on { animation: none; }
}

/* ===========================================================================
   §14.4, second pass — a field that matches the fight
   --------------------------------------------------------------------------
   Our half on the left facing right, the enemy's mirrored on the right,
   VS between them. It was one diagonal across the whole width, so the
   player arranged a line here and then watched a different one fight.
   ========================================================================= */

.fm-side {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 46%;
}
.fm-side.is-ours { left: 0; }
.fm-side.is-theirs { right: 0; }

/* Pads inside a side are positioned against THAT side, so one set of
   percentages serves both and the mirror is exact. */
.fm-side.is-theirs .fm-slot { translate: 50% 0; }

.fm-vs {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  z-index: 3;
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  color: var(--gold-200);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.8), 0 0 14px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

/* The enemy line is a read-out, not a thing to arrange. */
.fm-slot.is-foe { cursor: default; width: 62px; }
.fm-slot.is-foe .fm-fig { height: 78px; transform: scaleX(-1); }
.fm-slot.is-foe .fm-pad {
  border-color: rgba(255, 150, 140, 0.5);
  background: radial-gradient(60% 70% at 50% 40%, rgba(220, 90, 80, 0.3), transparent 72%);
}
.fm-slot-fac {
  position: absolute;
  top: -2px;
  right: 2px;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: rgba(6, 8, 14, 0.82);
}

/* Our side faces right; the art mostly comes back facing the camera, so
   it gets the same mirror the battlefield gives it. */
.fm-side.is-ours .fm-fig { transform: none; }

/* --- both powers, facing each other --------------------------------------- */

.fm-scales {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s2);
  margin: 0 var(--s3) var(--s2);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--rad-pill);
  background: var(--panel-sunken);
}
.fm-scale { display: inline-flex; align-items: center; gap: 5px; color: var(--text-cream); }
.fm-scale.is-theirs { justify-content: flex-end; color: var(--text-muted); }
.fm-scale-mid {
  padding: 1px 10px;
  border-radius: var(--rad-pill);
  font-size: var(--fz-tiny);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: rgba(0, 0, 0, 0.35);
}
.fm-scales.is-green .fm-scale-mid { color: #0c2a14; background: var(--success); }
.fm-scales.is-amber .fm-scale-mid { color: #2a1e05; background: var(--warn); }
.fm-scales.is-red .fm-scale-mid { color: #fff; background: var(--alert); }

/* --- controls -------------------------------------------------------------- */

.fm-controls { display: flex; align-items: center; gap: var(--s2); }
.fm-controls .kit-btn.primary { flex: 1; }

/* Three saved lines. Tap loads, long-press overwrites. */
.fm-saves { display: flex; gap: 4px; }
.fm-save {
  width: 34px;
  height: 34px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--rad-sm);
  background: var(--panel-sunken);
  color: var(--text-dim);
  font-family: var(--font-display);
  cursor: pointer;
}
.fm-save.is-filled {
  border-style: solid;
  border-color: var(--gold-300);
  color: var(--gold-200);
}

/* --- the bond row ----------------------------------------------------------
   Bigger emblems, and a bond that is on glows rather than merely being a
   slightly different grey. */
.fm-bonus-mark { width: 36px; height: 36px; }
.fm-bonus-mark .gi { width: 32px; height: 32px; }
.fm-bonus-mark.is-on {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--f) 85%, transparent),
    0 0 12px color-mix(in srgb, var(--f) 55%, transparent);
  animation: fm-bond 2.4s ease-in-out infinite;
}
@keyframes fm-bond {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25); }
}
@media (prefers-reduced-motion: reduce) { .fm-bonus-mark.is-on { animation: none; } }

/* Sized to the half they stand in, not to the whole field. Each side is
   46% of the width and holds two columns, so a 96px figure with a name
   plate under it ran into the pad above: the front pair sit 102px apart
   on a 320px field and the figure plus plate came to more than that. */
.fm-field { height: 300px; }
.fm-slot { width: 58px; }
.fm-fig { height: 74px; margin-bottom: 6px; }
.fm-slot-name {
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.58rem;
}
.fm-slot.is-foe .fm-fig { height: 66px; }