/* ==========================================================================
   Profile fight slider - one fight per slide.
   The card markup is the home page card (.fp-fight), so this file only turns
   the wrapper into a horizontal scroll-snap track and styles the nav.
   No rule touches the card itself: the theme keeps driving .fp-fight.
   Container selectors use .fp-fights.fp-fights--slider (0-2-0) so they beat
   the .fp-fights grid declared in fp-combat.css.
   ========================================================================== */

.fp-fights-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.fp-fights-head__label {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
}

.fp-fights-head__count {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}

.fp-fight-slider { position: relative; }

.fp-fights.fp-fights--slider {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 18px;
  margin-top: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.fp-fights.fp-fights--slider::-webkit-scrollbar { display: none; height: 0; }

/* One figure per slide, at every breakpoint. */
.fp-fights.fp-fights--slider > .fp-fight {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.fp-fights--slider:focus-visible { outline: 2px solid var(--c-red, #ff1e1e); outline-offset: 4px; }

/* State label inside the card meta (new element, theme has no rule for it). */
.fp-fight__state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}

.fp-fight__state::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-red, #ff1e1e);
}

/* Navigation: arrows and one dot per fight. */
.fp-fight-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
}

.fp-fight-slider--single .fp-fight-nav { display: none; }

.fp-fight-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(0, 0, 0, .35);
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, opacity .2s ease;
}

.fp-fight-nav__btn:hover { border-color: var(--c-red, #ff1e1e); background: rgba(0, 0, 0, .55); }

.fp-fight-nav__btn:disabled { opacity: .35; cursor: default; border-color: rgba(255, 255, 255, .12); }

.fp-fight-nav__dots { display: flex; align-items: center; gap: 8px; }

.fp-fight-nav__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.fp-fight-nav__dot:hover { transform: scale(1.2); }

.fp-fight-nav__dot[aria-current="true"] {
  background: var(--c-red, #ff1e1e);
  border-color: var(--c-red, #ff1e1e);
}

.fp-fight-nav__btn:focus-visible,
.fp-fight-nav__dot:focus-visible { outline: 2px solid var(--c-red, #ff1e1e); outline-offset: 3px; }

@media (max-width: 767.98px) {
  .fp-fights.fp-fights--slider { gap: 12px; }
  .fp-fights-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .fp-fight-nav__btn { width: 34px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .fp-fights.fp-fights--slider { scroll-behavior: auto; }
  .fp-fight-nav__btn,
  .fp-fight-nav__dot { transition: none; }
  .fp-fight-nav__dot:hover { transform: none; }
}

/* Data-file rows: a side without a portrait shows a two-letter mark instead of
   a broken image; the result line carries method + round/time, the note the
   stake of the bout. */
.fp-fight__photo--mark {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, .28));
  border: 1px solid rgba(255, 255, 255, .10);
}

.fp-fight__photo--mark span {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 34px;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .40);
}

.fp-fight__state--win { color: #fff; }
.fp-fight__state--win::before { background: #22c55e; }
.fp-fight__state--loss::before { background: #ef4444; }
.fp-fight__state--nc::before { background: #eab308; }

.fp-fight__result {
  font-size: 12px;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .82);
}

.fp-fight__note {
  font-size: 11px;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .45);
}

/* --------------------------------------------------------------------------
   Background mark and scan lines inside the card.
   The word mirrors the home hero mark (FIGHT) but lives inside the card; the
   mark and the lines tint green or red after the verdict of the owner.
   -------------------------------------------------------------------------- */
.fp-fight {
  position: relative;
  overflow: hidden;
  --fp-verdict: 255, 30, 30;
}

.fp-fight[data-fp-fight-verdict="win"] { --fp-verdict: 34, 197, 94; }
.fp-fight[data-fp-fight-verdict="loss"] { --fp-verdict: 239, 68, 68; }
.fp-fight[data-fp-fight-verdict="draw"],
.fp-fight[data-fp-fight-verdict="nc"] { --fp-verdict: 234, 179, 8; }

.fp-fight__ghost,
.fp-fight__lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.fp-fight__ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(84px, 15vw, 250px);
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  user-select: none;
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--fp-verdict), .30);
  transform: translate3d(var(--fp-ghost-x, 0px), var(--fp-ghost-y, 0px), 0);
  transition: -webkit-text-stroke-width .4s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
  animation: fp-fight-breathe 17s ease-in-out infinite;
}

.fp-fight > *:not(.fp-fight__ghost):not(.fp-fight__lines) {
  position: relative;
  z-index: 1;
}

@keyframes fp-fight-breathe {
  0%, 100% { opacity: .34; }
  50% { opacity: .60; }
}

.fp-fight:hover .fp-fight__ghost { -webkit-text-stroke-width: 2px; }

.fp-fight__lines span {
  position: absolute;
  left: -10%;
  right: -10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--fp-verdict), .78), transparent);
  opacity: 0;
  animation: fp-fight-scan 7.5s linear infinite;
}

.fp-fight__lines span:nth-child(2) { animation-delay: 2.5s; }
.fp-fight__lines span:nth-child(3) { animation-delay: 5s; }

@keyframes fp-fight-scan {
  0% { top: 6%; opacity: 0; }
  12% { opacity: .55; }
  50% { opacity: .30; }
  70% { opacity: 0; }
  100% { top: 94%; opacity: 0; }
}

/* Random burst fired by the script: thicker mark, faster lines. */
.fp-fight.is-burst .fp-fight__ghost { -webkit-text-stroke-width: 2px; }
.fp-fight.is-burst .fp-fight__lines span { animation-duration: 1.9s; }
.fp-fight.is-burst .fp-fight__lines span:nth-child(2) { animation-delay: .4s; }
.fp-fight.is-burst .fp-fight__lines span:nth-child(3) { animation-delay: .8s; }

@media (prefers-reduced-motion: reduce) {
  .fp-fight__ghost { animation: none; opacity: .45; transform: none; }
  .fp-fight__lines span { animation: none; opacity: .28; }
  .fp-fight__lines span:nth-child(1) { top: 30%; }
  .fp-fight__lines span:nth-child(2) { top: 50%; animation-delay: 0s; }
  .fp-fight__lines span:nth-child(3) { top: 70%; animation-delay: 0s; }
  .fp-fight.is-burst .fp-fight__lines span { animation-duration: 0s; }
}