/* ─── folks.css ─────────────────────────────────────────────────────────────
   Folk + location visuals: KoS facing arrows + orient picker, DoA panel toggle, Der Fluss current arrow + menu config, RoX wormhole stack/pop. A new folk's CSS belongs here (see docs/FOLK-FRAMEWORK.md checklist).
   Split out of the old style.css as a pure ordered slice. The <link> order
   in index.html (base → menu → online → board → folks → war → overlays →
   mobile → free-mode) preserves the original cascade — do not reorder. ─── */

/* Knights of Steel: aligned creatures (Loyal Shield, Silver Spear, Burning
   Stag) show their facing by rotating the die — its art already has an up
   arrow (the standard view), so we just turn it. up = no rotation. */
.creature-img.face-right { transform: rotate(90deg); }
.creature-img.face-down  { transform: rotate(180deg); }
.creature-img.face-left  { transform: rotate(-90deg); }

/* Knights of Steel: facing (Orient) picker — a small row of 4 direction buttons. */
.kos-orient-row { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; margin-top: 3px; }
.kos-orient-label { font-size: 0.72rem; color: #aaa; margin-right: 2px; }
/* The #action-panel selector keeps these square against the panel's
   full-width/compact button rules (higher specificity than #id button). */
.kos-orient-btn, #action-panel .kos-orient-btn {
  width: 26px; height: 26px; padding: 0; font-size: 0.95rem; line-height: 1;
}
.kos-orient-btn.current { outline: 2px solid #f4d03f; }

/* DoA Geisterruf: the selected split-type in the panel toggle. */
.doa-gr-type.current { outline: 2px solid #f4d03f; }

/* Der Fluss: current-direction arrow over the river tile (rotates with the P2
   perspective, which is exactly right — board-right looks left from P2). */
.cell.fluss-right::after, .cell.fluss-left::after {
  content: '→'; position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 1.25rem; font-weight: 700; color: #cfeaff;
  text-shadow: 0 0 5px #08365c, 0 0 2px #000; pointer-events: none; z-index: 2;
}
.cell.fluss-left::after { content: '←'; }

/* Der Fluss menu config (column + current direction selectors). */
#fluss-config { display: flex; gap: 12px; margin: 4px 0 0 24px; font-size: 0.9rem; }
#fluss-config.hidden { display: none; }
#fluss-config select { margin-left: 4px; }

/* RoX Wormhole: the teleported creature stacked on top of a Portal Bearer.
   Same die look as .creature, nudged up-left and lifted (bigger shadow) so it
   visibly sits ON the Bearer. */
.wh-stack {
  position: absolute;
  top: 50%; left: 50%;
  width: 58px; height: 58px;
  border-radius: 5px;
  overflow: hidden;
  z-index: 5;
  pointer-events: none;
  transform: translate(-62%, -66%) scale(1.04);   /* center, then nudge up-left */
  filter: drop-shadow(0 9px 14px rgba(0,0,0,0.6));
}
.wh-stack.p1 { background: #c1121f; }
.wh-stack.p2 { background: #1c1c1c; }

/* RoX Wormhole: the Bearer "pops" (lift + scale + shadow) as it is downgraded,
   mirroring the free-mode drag look. */
@keyframes wh-pop {
  0%   { transform: translateY(0)    scale(1);    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)); }
  45%  { transform: translateY(-9px) scale(1.22); filter: drop-shadow(0 12px 16px rgba(0,0,0,0.6)); }
  100% { transform: translateY(0)    scale(1);    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)); }
}
.creature.wh-pop { animation: wh-pop 0.5s ease; z-index: 6; }

@keyframes attack-flash {
  0%   { background: rgba(230, 57, 70, 0); }
  30%  { background: rgba(230, 57, 70, 0.6); }
  100% { background: rgba(230, 57, 70, 0); }
}
#board-war .cell.attack-flash { animation: attack-flash 0.35s ease; }