@golstats/gsc-reports 1.0.73 → 1.0.74

package/src/components/elementsTemplates/TirosEsquinaView.vue

@@ -0,0 +1,1071 @@
+<template>
+  <div class="corners-view">
+    <!-- Header con título y descripción -->
+    <div class="corners-header">
+      <div class="team-logo-container">
+        <img
+          :src="teamLogoUrl"
+          :alt="`Logo ${teamInitials}`"
+          class="team-logo"
+          @error="onLogoError"
+        />
+      </div>
+      <div class="header-content">
+        <h3 class="corners-title">{{ title }}</h3>
+        <p class="corners-description">
+          Este template contiene 10 visualizaciones de tiros de esquina. Selecciona los deseados.
+        </p>
+      </div>
+    </div>
+
+    <div class="corners-container">
+      <!-- Header Partido Selector - Carrusel (dentro del recuadro) -->
+      <div class="matches-header">
+        <div
+          class="window"
+          ref="matchesWindowRef"
+          @pointerdown="onPointerDown"
+          @pointerup="onPointerUp"
+          @pointercancel="onPointerUp"
+          @pointerleave="onPointerUp"
+          @pointermove="onPointerMove"
+        >
+          <button v-if="showLeftMatchesArrow" class="carousel-arrow left" @click="prevSlide">
+            ‹
+          </button>
+          <div class="track" :class="{ animating: !isDragging }" :style="trackStyle">
+            <div
+              v-for="(m, idx) in matches"
+              :key="m.id + '-' + idx"
+              class="match-pill"
+              :class="{ active: idx === currentIndex }"
+            >
+              <div class="team-logos">
+                <div class="logo">{{ m.home }}</div>
+                <span class="score">{{ m.score }}</span>
+                <div class="logo alt">{{ m.away }}</div>
+              </div>
+              <div class="meta">{{ m.jornada }}</div>
+            </div>
+          </div>
+          <button v-if="showRightMatchesArrow" class="carousel-arrow right" @click="nextSlide">
+            ›
+          </button>
+        </div>
+      </div>
+      <!-- Tabs - segmented control -->
+      <div class="categorias-tabs segmented">
+        <div
+          class="segmented-highlight"
+          :style="{
+            width: `calc(100% / ${tabs.length})`,
+            left: `calc(${tabs.indexOf(activeTab)} * (100% / ${tabs.length}))`,
+          }"
+        ></div>
+        <button
+          v-for="tab in tabs"
+          :key="tab"
+          class="categoria-tab"
+          :class="{ active: activeTab === tab }"
+          @click="activeTab = tab"
+        >
+          {{ tab }}
+        </button>
+      </div>
+
+      <!-- Lista de corners -->
+      <div class="corners-list">
+        <div
+          v-for="item in filteredItems"
+          :key="item.id"
+          class="corner-item"
+          :class="{ selected: selectedIds.includes(item.id), disabled: item.disabled }"
+          @click="!item.disabled && toggle(item.id)"
+        >
+          <div class="check-col">
+            <div class="corner-checkbox" @click.stop="!item.disabled && toggle(item.id)">
+              <input
+                type="checkbox"
+                :checked="selectedIds.includes(item.id)"
+                :disabled="item.disabled"
+                class="checkbox-input"
+                @click.stop="!item.disabled && toggle(item.id)"
+              />
+              <span v-if="selectedIds.includes(item.id)" class="selection-number">
+                {{ selectionOrderMap[item.id] }}
+              </span>
+            </div>
+          </div>
+          <div class="badge-col">
+            <div class="count-badge">{{ item.order }}</div>
+          </div>
+          <div class="content-col">
+            <div class="title-row">
+              <span class="time">{{ item.minute }}</span>
+              <span class="title">{{ item.title }}</span>
+              <span class="player">| {{ item.player }}</span>
+            </div>
+            <div class="meta-row">
+              <span>Comba hacia afuera</span>
+              <span class="dot" />
+              <span>Rematado {{ item.wasGoal ? 'fue gol' : 'no fue gol' }}</span>
+              <div class="separator"></div>
+              <div class="category-indicator">
+                <div
+                  class="category-dot"
+                  :style="{ backgroundColor: item.color || '#4CAF50' }"
+                ></div>
+                <span>{{ item.category }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Footer con contador y carrusel -->
+    <div class="corners-footer">
+      <!-- Contador izquierdo - solo si hay tiros de esquina seleccionados -->
+      <div v-if="selectedIds.length > 0" class="counter-section">
+        <div class="counter-text">{{ selectedIds.length }}/10</div>
+      </div>
+
+      <!-- Carrusel derecho - solo si hay tiros de esquina seleccionados -->
+      <div v-if="selectedIds.length > 0" class="carousel-section">
+        <div class="carousel-container" ref="carouselContainerRef">
+          <button v-if="showLeftArrow" class="carousel-arrow left" @click="scrollLeft">‹</button>
+          <div class="carousel-track" ref="carouselTrackRef" :style="carouselTrackStyle">
+            <div v-for="corner in selectedCornersData" :key="corner.id" class="footer-pill">
+              <div class="footer-badge">{{ corner.order }}</div>
+              <div class="footer-content">
+                <div class="footer-name">{{ corner.title }}</div>
+                <div class="footer-ranking">
+                  <span>{{ corner.minute }}</span>
+                  <span>{{ corner.player }}</span>
+                  <div class="footer-separator"></div>
+                  <div class="footer-category-indicator">
+                    <div
+                      class="footer-category-dot"
+                      :style="{ backgroundColor: corner.color || '#4CAF50' }"
+                    ></div>
+                    <span>{{ corner.category }}</span>
+                  </div>
+                </div>
+              </div>
+              <button class="pill-remove-btn" @click="removeCorner(corner.id)">×</button>
+            </div>
+          </div>
+          <!-- Flecha derecha -->
+          <button v-if="showRightArrow" class="carousel-arrow right" @click="scrollRight">›</button>
+        </div>
+      </div>
+
+      <!-- Mensaje cuando no hay tiros de esquina seleccionados - full width -->
+      <div v-else class="empty-message-full">
+        <span class="empty-text">{{ selectedIds.length }} de 10 Tiros de esquina agregados</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, reactive, onMounted, onBeforeUnmount, nextTick, watch } from 'vue'
+
+const props = defineProps({
+  modelValue: { type: Array, default: () => [] },
+  rival: { type: Boolean, default: false },
+  teamInitials: {
+    type: String,
+    default: 'AME',
+  },
+  title: {
+    type: String,
+    default: 'Tiros de esquina en contra de mi equipo',
+  },
+  teamLogoUrl: {
+    type: String,
+    default: 'https://golstatsimages.blob.core.windows.net/teams-80/2.png',
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const tabs = ['Todos', 'Ofensiva', 'Defensiva']
+const activeTab = ref('Todos')
+
+const selectedIds = ref([...props.modelValue])
+const selectionOrderMap = reactive({})
+
+// Inicializar mapa de orden con las selecciones iniciales
+selectedIds.value.forEach((id, idx) => {
+  selectionOrderMap[id] = idx + 1
+})
+
+// Carrusel de tiros de esquina seleccionados
+const carouselScrollLeft = ref(0)
+const carouselContainerRef = ref(null)
+const carouselTrackRef = ref(null)
+const containerWidth = ref(0)
+const trackWidth = ref(0)
+
+// Medir tamaños para overflow
+function measureCarousel() {
+  const container = carouselContainerRef.value
+  const track = carouselTrackRef.value
+  containerWidth.value = container ? container.clientWidth : 0
+  trackWidth.value = track ? track.scrollWidth : 0
+}
+
+// Calcular overflow y mostrar flechas
+const maxScroll = computed(() => Math.max(0, trackWidth.value - containerWidth.value))
+
+const showLeftArrow = computed(() => carouselScrollLeft.value > 0)
+const showRightArrow = computed(() => carouselScrollLeft.value < maxScroll.value)
+
+// Función para scroll hacia la derecha
+function scrollRight() {
+  const next = Math.min(maxScroll.value, carouselScrollLeft.value + 200)
+  carouselScrollLeft.value = next
+}
+
+function scrollLeft() {
+  const next = Math.max(0, carouselScrollLeft.value - 200)
+  carouselScrollLeft.value = next
+}
+
+// Datos de tiros de esquina seleccionados ordenados por número
+const selectedCornersData = computed(() => {
+  return selectedIds.value
+    .map((id) => items.value.find((f) => f.id === id))
+    .filter(Boolean)
+    .sort((a, b) => selectionOrderMap[a.id] - selectionOrderMap[b.id])
+})
+
+// Estilo del track del carrusel
+const carouselTrackStyle = computed(() => {
+  return {
+    transform: `translateX(-${carouselScrollLeft.value}px)`,
+  }
+})
+
+// Carrusel de partidos (mock)
+const matches = ref([
+  { id: 1, home: 'AME', away: 'PUM', score: '4 - 1', jornada: 'J11' },
+  { id: 2, home: 'ASL', away: 'AME', score: '0 - 1', jornada: 'J10' },
+  { id: 3, home: 'MTY', away: 'AME', score: '2 - 0', jornada: 'J9' },
+  { id: 4, home: 'CAZ', away: 'AME', score: '1 - 1', jornada: 'J8' },
+  { id: 5, home: 'AME', away: 'LEO', score: '3 - 2', jornada: 'J7' },
+])
+const currentIndex = ref(0)
+const matchesWindowRef = ref(null)
+const visibleMatchCount = ref(1)
+const maxMatchIndex = computed(() => Math.max(0, matches.value.length - visibleMatchCount.value))
+const showLeftMatchesArrow = computed(() => currentIndex.value > 0)
+const showRightMatchesArrow = computed(() => currentIndex.value < maxMatchIndex.value)
+const isDragging = ref(false)
+const startX = ref(0)
+const deltaX = ref(0)
+
+const cardWidth = 148 // ancho aproximado del pill + gap
+
+function measureMatchesWindow() {
+  const win = matchesWindowRef.value
+  const width = win ? win.clientWidth : 0
+  const perView = Math.max(1, Math.floor(width / (cardWidth + 10)))
+  visibleMatchCount.value = perView
+}
+
+const trackStyle = computed(() => {
+  const base = -currentIndex.value * (cardWidth + 10)
+  const dragOffset = isDragging.value ? deltaX.value : 0
+  return { transform: `translateX(${base + dragOffset}px)` }
+})
+
+function nextSlide() {
+  currentIndex.value = Math.min(maxMatchIndex.value, currentIndex.value + 1)
+}
+
+function prevSlide() {
+  currentIndex.value = Math.max(0, currentIndex.value - 1)
+}
+
+function onPointerDown(e) {
+  isDragging.value = true
+  startX.value = e.clientX
+  deltaX.value = 0
+}
+
+function onPointerMove(e) {
+  if (!isDragging.value) return
+  deltaX.value = e.clientX - startX.value
+}
+
+function onPointerUp() {
+  if (!isDragging.value) return
+  const threshold = cardWidth / 3
+  if (deltaX.value <= -threshold) nextSlide()
+  else if (deltaX.value >= threshold) prevSlide()
+  isDragging.value = false
+  deltaX.value = 0
+}
+
+const items = ref([
+  {
+    id: 1,
+    order: '2/7',
+    minute: '12:31',
+    title: 'Tiro de esquina',
+    player: 'Pedro Vite',
+    wasGoal: true,
+    category: 'Ofensiva',
+    color: '#4CAF50',
+  },
+  {
+    id: 2,
+    order: '4/7',
+    minute: '33:41',
+    title: 'Tiro de esquina',
+    player: 'Pedro Vite',
+    wasGoal: false,
+    category: 'Defensiva',
+    color: '#F44336',
+  },
+  {
+    id: 3,
+    order: '6/7',
+    minute: '62:21',
+    title: 'Tiro de esquina',
+    player: 'Pedro Vite',
+    wasGoal: false,
+    category: 'Ofensiva',
+    color: '#4CAF50',
+    disabled: true,
+  },
+])
+
+const filteredItems = computed(() => {
+  if (activeTab.value === 'Todos') return items.value
+  return items.value.filter((i) => i.category === activeTab.value)
+})
+
+function toggle(id) {
+  const item = items.value.find((i) => i.id === id)
+  if (item?.disabled) return
+
+  const index = selectedIds.value.indexOf(id)
+  if (index > -1) {
+    // deseleccionar: quitar del array y mantener números sin reordenar
+    selectedIds.value.splice(index, 1)
+    delete selectionOrderMap[id]
+  } else {
+    // seleccionar: asignar el número más bajo disponible
+    const total = items.value.length
+    const usedNumbers = new Set(Object.values(selectionOrderMap))
+
+    // encontrar el primer número disponible (1, 2, 3, ...)
+    let nextNumber = 1
+    while (usedNumbers.has(nextNumber) && nextNumber <= total) {
+      nextNumber++
+    }
+
+    selectionOrderMap[id] = nextNumber
+    selectedIds.value.push(id)
+  }
+  emit('update:modelValue', selectedIds.value)
+}
+
+function autocompletar() {
+  const total = items.value.length
+  const alreadySelected = new Set(selectedIds.value)
+  const usedNumbers = new Set(Object.values(selectionOrderMap))
+
+  // números faltantes 1..total que no están usados
+  const missingNumbers = []
+  for (let n = 1; n <= total; n++) {
+    if (!usedNumbers.has(n)) missingNumbers.push(n)
+  }
+  // orden ascendente para asignar secuencialmente
+  missingNumbers.sort((a, b) => a - b)
+
+  // ids que faltan por seleccionar, en el orden ACTUAL visible (arriba -> abajo)
+  const remainingIds = filteredItems.value.map((f) => f.id).filter((id) => !alreadySelected.has(id))
+
+  for (const id of remainingIds) {
+    const num = missingNumbers.shift()
+    if (num === undefined) break
+    selectionOrderMap[id] = num
+    selectedIds.value.push(id)
+  }
+
+  emit('update:modelValue', selectedIds.value)
+}
+
+function removeCorner(cornerId) {
+  const index = selectedIds.value.indexOf(cornerId)
+  if (index > -1) {
+    selectedIds.value.splice(index, 1)
+    delete selectionOrderMap[cornerId]
+    emit('update:modelValue', selectedIds.value)
+  }
+}
+
+function onLogoError() {
+  console.warn('Error loading team logo, falling back to initials')
+}
+
+let carouselResizeHandler = null
+
+onMounted(() => {
+  measureCarousel()
+  const onResize = () => measureCarousel()
+  window.addEventListener('resize', onResize)
+  carouselResizeHandler = onResize
+})
+
+onBeforeUnmount(() => {
+  if (carouselResizeHandler) {
+    window.removeEventListener('resize', carouselResizeHandler)
+    carouselResizeHandler = null
+  }
+})
+
+// Re-medir cuando cambia el contenido seleccionado
+watch(
+  () => selectedIds.value.slice(),
+  async () => {
+    await nextTick()
+    measureCarousel()
+  },
+  { deep: true },
+)
+
+// Medición para matches window
+let matchesResizeHandler = null
+onMounted(() => {
+  measureMatchesWindow()
+  const onResizeMatches = () => measureMatchesWindow()
+  window.addEventListener('resize', onResizeMatches)
+  matchesResizeHandler = onResizeMatches
+})
+
+onBeforeUnmount(() => {
+  if (matchesResizeHandler) {
+    window.removeEventListener('resize', matchesResizeHandler)
+    matchesResizeHandler = null
+  }
+})
+
+defineExpose({ autocompletar })
+</script>
+
+<style scoped>
+.corners-view {
+  width: 100%;
+}
+
+.corners-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.team-logo-container {
+  width: 64px;
+  height: 64px;
+  border-radius: 12px;
+  background-color: rgba(255, 255, 255, 0.05);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px;
+  flex-shrink: 0;
+}
+
+.team-logo {
+  width: 40px;
+  height: 40px;
+  border-radius: 4px;
+  object-fit: contain;
+  background: transparent;
+}
+
+.header-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.corners-title {
+  font-family: Poppins-Medium;
+  font-size: 14px;
+  font-weight: 500;
+  opacity: 0.8;
+  color: #fff;
+  margin: 0;
+}
+
+.corners-description {
+  font-family: Poppins-Regular;
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.5);
+  margin: 0;
+  line-height: 1.4;
+}
+
+.corners-container {
+  border-radius: 8px;
+  border: solid 1px rgba(224, 231, 240, 0.3);
+  padding: 12px;
+}
+
+.matches-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+.window {
+  overflow: hidden;
+  position: relative;
+}
+.track {
+  display: flex;
+  gap: 10px;
+}
+.track.animating {
+  transition: transform 220ms ease;
+}
+.match-pill {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px 12px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 10px;
+  color: #fff;
+  opacity: 0.7;
+}
+.match-pill.active {
+  border-color: #cbee6b;
+  opacity: 1;
+  box-shadow: 0 0 0 1px rgba(203, 238, 107, 0.25) inset;
+}
+.team-logos {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.logo {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.12);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+}
+.logo.alt {
+  background: rgba(255, 255, 255, 0.08);
+}
+.score {
+  font-family: Poppins-Medium;
+  font-size: 12px;
+}
+.meta {
+  font-family: Poppins-Regular;
+  font-size: 10px;
+  opacity: 0.7;
+}
+.nav {
+  background: none;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: #fff;
+  border-radius: 50%;
+  width: 28px;
+  height: 28px;
+  cursor: pointer;
+}
+.nav:hover {
+  border-color: #cbee6b;
+  color: #cbee6b;
+}
+
+.categorias-tabs {
+  display: flex;
+  gap: 8px;
+  margin: 12px 0 16px;
+}
+.categoria-tab {
+  padding: 8px 16px;
+  border-radius: 20px;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  background: transparent;
+  color: rgba(255, 255, 255, 0.7);
+  font-family: Poppins-Regular;
+  font-size: 12px;
+  cursor: pointer;
+}
+.categoria-tab.active {
+  border-color: #cbee6b;
+  color: #cbee6b;
+  background: rgba(203, 238, 107, 0.08);
+}
+
+/* Segmented control styles to match fortalezas */
+.categorias-tabs.segmented {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0;
+  border: 1px solid rgba(224, 231, 240, 0.3);
+  border-radius: 999px;
+  padding: 0;
+  overflow: hidden;
+}
+
+.segmented-highlight {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: 999px;
+  border: 1px solid #cbee6b;
+  pointer-events: none;
+  transition:
+    left 220ms ease,
+    width 220ms ease;
+}
+
+.categorias-tabs.segmented .categoria-tab {
+  position: relative;
+  flex: 1 1 0;
+  background: transparent;
+  border: none;
+  color: rgba(255, 255, 255, 0.6);
+  padding: 8px 12px;
+  font-family: Poppins-Regular;
+  font-size: 12px;
+  cursor: pointer;
+  z-index: 1;
+}
+
+.categorias-tabs.segmented .categoria-tab.active {
+  color: #fff;
+}
+
+.corners-list {
+  max-height: 300px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: #cbee6b #2e3b46;
+  margin-bottom: 16px;
+}
+.corners-list::-webkit-scrollbar {
+  width: 6px;
+}
+.corners-list::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 3px;
+}
+
+.corner-item {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  padding: 12px;
+  border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
+  color: #fff;
+}
+
+.corner-item:last-child {
+  border-bottom: none;
+}
+
+/* Opacidad por defecto cuando no está seleccionado */
+.corner-item :is(.title-row, .meta-row, .count-badge) {
+  opacity: 0.7;
+}
+
+/* Al seleccionar se restaura a 1 */
+.corner-item.selected :is(.title-row, .meta-row, .count-badge) {
+  opacity: 1;
+}
+.corner-item.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.corner-item.selected {
+  background: transparent;
+}
+.corner-checkbox {
+  position: relative;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+}
+
+.checkbox-input {
+  width: 20px;
+  height: 20px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-radius: 4px;
+  background: transparent;
+  cursor: pointer;
+  position: relative;
+  transition: all 0.2s ease;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+.checkbox-input:checked {
+  background: #cbee6b;
+  border-color: #cbee6b;
+}
+
+.checkbox-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.selection-number {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: #000;
+  font-size: 12px;
+  font-weight: bold;
+  font-family: Poppins-Bold;
+  pointer-events: none;
+}
+.count-badge {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.08);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: Poppins-Medium;
+}
+.content-col {
+  flex: 1;
+}
+.title-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+}
+.time {
+  font-size: 11px;
+  opacity: 0.7;
+}
+.player {
+  opacity: 0.7;
+  font-size: 12px;
+}
+.meta-row {
+  display: flex;
+  gap: 6px;
+  opacity: 0.7;
+  font-size: 11px;
+  margin-top: 4px;
+}
+.meta-row .dot {
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.5);
+  align-self: center;
+}
+
+.separator {
+  width: 1px;
+  height: 12px;
+  background-color: rgba(255, 255, 255, 0.3);
+  margin: 0 6px;
+  align-self: center;
+}
+
+.category-indicator {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.category-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+}
+
+.category-indicator span {
+  font-family: Poppins-Regular;
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+/* Footer con contador y carrusel */
+.corners-footer {
+  display: flex;
+  gap: 16px;
+  margin-top: 20px;
+  width: 100%;
+}
+
+.counter-section {
+  width: 59px;
+  height: 68px;
+  flex-grow: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  padding: 12px;
+  border-radius: 8px;
+  border: solid 1px rgba(255, 255, 255, 0.1);
+  background-color: rgba(255, 255, 255, 0.02);
+}
+
+.counter-text {
+  font-family: Poppins-Regular;
+  font-size: 12px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.33;
+  letter-spacing: 1.2px;
+  text-align: center;
+  color: #fff;
+}
+
+.carousel-section {
+  flex: 1;
+  width: 332px;
+  height: 72px;
+  flex-grow: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 16px;
+  padding: 12px 10px 12px 8px;
+  border-radius: 8px;
+  background-color: rgba(255, 255, 255, 0.05);
+  position: relative;
+}
+
+.carousel-container {
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.carousel-track {
+  display: flex;
+  gap: 8px;
+  transition: transform 0.3s ease;
+  min-width: max-content;
+  height: 100%;
+  align-items: center;
+  z-index: 1;
+}
+
+.footer-pill {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.2s ease;
+  background: rgba(255, 255, 255, 0.05);
+  flex-shrink: 0;
+  height: fit-content;
+  min-width: 250px;
+  position: relative;
+}
+
+.footer-pill:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.footer-pill .footer-badge {
+  width: 54px;
+  height: 54px;
+  padding: 6px 8px;
+  border-radius: 10.4px;
+  box-shadow: 0 12.4px 49.8px 0 rgba(0, 0, 0, 0.08);
+  border-image-slice: 1;
+  background-blend-mode: color-dodge;
+  background-image:
+    linear-gradient(to bottom, rgba(50, 50, 50, 0), rgba(50, 50, 50, 0)),
+    linear-gradient(
+      138deg,
+      rgba(255, 255, 255, 0.2) 2%,
+      rgba(255, 255, 255, 0.1) 14%,
+      rgba(255, 255, 255, 0) 77%,
+      rgba(255, 255, 255, 0.2) 100%
+    );
+  background-origin: border-box;
+  background-clip: content-box, border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: Poppins-SemiBold;
+  border-radius: 10.4px;
+  font-size: 20.7px;
+  font-weight: 600;
+  color: #fff;
+  flex-shrink: 0;
+}
+
+.footer-pill .footer-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.footer-pill .footer-name {
+  font-family: Poppins-Medium;
+  font-size: 14px;
+  font-weight: 500;
+  color: #fff;
+  margin-bottom: 4px;
+  line-height: 1.3;
+}
+
+.footer-pill .footer-ranking {
+  font-family: Poppins-Regular;
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.6);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.footer-pill .footer-league-logo {
+  width: 16px;
+  height: 16px;
+  border-radius: 2px;
+  object-fit: contain;
+}
+
+.footer-pill .footer-separator {
+  width: 1px;
+  height: 12px;
+  background-color: rgba(255, 255, 255, 0.3);
+  margin: 0 6px;
+}
+
+.footer-pill .footer-category-indicator {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.footer-pill .footer-category-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+}
+
+.footer-pill .footer-category-indicator span {
+  font-family: Poppins-Regular;
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.pill-remove-btn {
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 18px;
+  font-weight: bold;
+  cursor: pointer;
+  padding: 0;
+  margin-left: auto;
+  line-height: 1;
+  opacity: 0.7;
+  transition: opacity 0.2s ease;
+  width: 20px;
+  height: 20px;
+  margin-top: -40px;
+  margin-right: -8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pill-remove-btn:hover {
+  opacity: 1;
+  color: #fff;
+}
+
+.carousel-arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: #fff;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 18px;
+  font-weight: bold;
+  transition: all 0.2s ease;
+  z-index: 2;
+}
+
+.carousel-arrow:hover {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+.carousel-arrow.right {
+  right: 8px;
+}
+.carousel-arrow.left {
+  left: 8px;
+}
+
+.empty-message-full {
+  width: 100%;
+  height: 72px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 12px;
+  border-radius: 8px;
+  background-color: rgba(255, 255, 255, 0.05);
+  position: relative;
+}
+
+.empty-text {
+  font-family: Poppins-Regular;
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.7);
+  text-align: center;
+  width: 100%;
+}
+</style>