/* V1 fight HUD (V1_FIGHT_BUILD.md): the wind-up strip, the range band, the element aura, the rim and lurch, and the
   victory/death vignette. Vellum tokens only; #fx-fight's data-* attributes (fx/fight.js) drive every rule. Motion
   only under prefers-reduced-motion: no-preference; body[data-effects="off"] stops it all (style.css). Each moving
   cue has a static twin: the rim and thicker edge (lurch), the word (blow), a fixed glow (aura). */
.foe-card { flex-wrap: wrap; }
#fx-fight { order: 9; flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.fx-range { display: flex; gap: 3px; font: 500 var(--t-xs)/1.3 var(--f-caps); letter-spacing: 0.04em; color: var(--ink-dim); }
.fx-range b { font-weight: 500; padding: 0 8px 1px; border-bottom: 2px solid var(--frame-line); }
.fx-range .fx-you { color: var(--verd); border-color: var(--verd); }
#fx-fight[data-range="melee"] [data-band="melee"], #fx-fight[data-range="pole"] [data-band="pole"], #fx-fight[data-range="missile"] [data-band="missile"] { color: var(--ink-bright); border-color: var(--rubric); }
#fx-fight[data-range="melee"] [data-band="melee"]::before, #fx-fight[data-range="pole"] [data-band="pole"]::before, #fx-fight[data-range="missile"] [data-band="missile"]::before { content: ""; display: inline-block; width: 0.42em; height: 0.42em; margin: 0 0.4em 0.1em 0; background: var(--rubric); transform: rotate(45deg); }

.fx-windup { flex: 1 1 100%; padding: 5px 8px 5px 10px; }
.fx-windup[hidden] { display: none; }
.fx-windup, .fx-dock { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; background: var(--well); border: 1px solid var(--rubric); border-left-width: 4px; border-radius: var(--radius); }
.fx-wl { color: var(--ink); min-width: 0; }
.fx-wl b, .fx-blow, .fx-dock-label { font: 700 var(--t-md)/1.1 var(--f-caps); letter-spacing: 0.08em; text-transform: uppercase; color: var(--rubric); }
.fx-answers { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.fx-answers:empty, .fx-blow:empty { display: none; }
.fx-answer:disabled { opacity: 0.55; cursor: not-allowed; border-style: dashed; }
.fx-blow:not([data-result="hit"]) { color: var(--verd); }

/* PTV-FIXES2 §3: the phone's docked answers (fight.js), 44 px each. */
.fx-dock { padding: 4px 6px 4px 8px; }
.fx-dock[hidden] { display: none; }
.fx-dock-label { font-size: var(--t-xs); }
.fx-dock .fx-answers { flex: 1 1 0; flex-wrap: nowrap; margin: 0; }
.fx-dock .fx-answer { flex: 1 1 0; min-width: 44px; min-height: 44px; padding: 6px 4px; }
.foe-card:has(#fx-fight[data-windup]) { border-width: 2px; }
.foe-card:has(#fx-fight[data-windup]) .foe-portrait :is(.entity-thumb, .entity-thumb-fallback) { border-color: var(--rubric); box-shadow: 0 0 0 2px var(--rubric); }

.foe-card:has(#fx-fight[data-element])::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 14px 1px var(--aura, var(--gold-dim)); opacity: 0.65; }
.foe-card:has(#fx-fight[data-element="fire"]) { --aura: var(--rubric); }
.foe-card:has(#fx-fight[data-element="cold"]) { --aura: var(--lapis); }
.foe-card:has(#fx-fight[data-element="lightning"]) { --aura: var(--gold); }
.foe-card:has(#fx-fight[data-element="acid"]) { --aura: var(--verd); }

/* The vignette is drawn only here: never under reduced motion (and fight.js never sets it with Effects off). */
@media (prefers-reduced-motion: no-preference) {
  .foe-card:has(#fx-fight[data-windup]) .foe-portrait { animation: fx-lurch 0.9s ease-in-out 2; }
  .foe-card:has(#fx-fight[data-element])::after { animation: fx-breathe 2.8s ease-in-out infinite alternate; }
  .fx-blow { animation: fx-pop var(--dur-calm) ease-out; }
  .log-wrap:has(#fx-fight[data-vignette])::after { content: ""; position: absolute; inset: 0; z-index: 7; pointer-events: none; border-radius: var(--radius); opacity: 0; --tint: var(--gold); box-shadow: inset 0 0 16vmin 3vmin color-mix(in srgb, var(--tint) 30%, var(--bar-well)); animation: fx-vignette 1.2s ease-out; }
  .log-wrap:has(#fx-fight[data-vignette="death"])::after { --tint: var(--rubric); }
  .log-wrap:has(#fx-fight[data-vignette="boss"])::after { box-shadow: inset 0 0 0 2px var(--gilt-line), inset 0 0 0 7px color-mix(in srgb, var(--gold) 20%, transparent), inset 0 0 22vmin 4vmin color-mix(in srgb, var(--gold) 40%, var(--bar-well)); animation-duration: 1.5s; }
}
@keyframes fx-lurch { 0%, 100% { transform: none; } 30% { transform: translate(-3px, 1px) rotate(-7deg) scale(1.07); } 60% { transform: translate(2px, 0) rotate(3deg); } }
@keyframes fx-breathe { from { opacity: 0.4; } to { opacity: 0.85; } }
@keyframes fx-pop { from { opacity: 0; transform: scale(1.35); } to { opacity: 1; transform: none; } }
@keyframes fx-vignette { 0% { opacity: 0; } 25%, 60% { opacity: 1; } 100% { opacity: 0; } }