/* GunBound Legacy Halloween 2026
   V2.6.2 - Desafíos Sangrientos: carrusel horizontal + previews amplias
   Solo presentación. No modifica backend, progreso ni reclamos.
*/

#misiones{
  position:relative;
}

/* Mantener encabezado/filtros de V2.6 y dar más aire al contenido */
#misiones .section-head{
  margin-bottom:10px!important;
}

#misiones .gbl-hw-v262-carousel{
  position:relative;
  width:100%;
  margin:4px 0 2px;
  padding:0 8px;
}

/* Carrusel real: 4 tarjetas visibles en escritorio */
#misiones #missionGrid{
  display:flex!important;
  grid-template-columns:none!important;
  flex-wrap:nowrap!important;
  align-items:stretch!important;
  gap:16px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
  overscroll-behavior-inline:contain;
  padding:8px 2px 14px!important;
  margin:0!important;
}
#misiones #missionGrid::-webkit-scrollbar{display:none}

/* Tarjeta más grande para que premio/preview respiren */
#misiones #missionGrid > .mission-card{
  flex:0 0 calc((100% - 48px)/4)!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  min-height:360px!important;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  padding:14px!important;
  display:flex!important;
  flex-direction:column!important;
  border-radius:12px!important;
  background:
    linear-gradient(180deg,rgba(31,7,9,.92),rgba(12,4,5,.94))!important;
  box-shadow:
    inset 0 0 24px rgba(255,68,0,.035),
    0 0 16px rgba(0,0,0,.28)!important;
}

/* Títulos y progreso */
#misiones .mission-name{
  font-size:17px!important;
  line-height:1.12!important;
  min-height:58px;
  margin:7px 0 8px!important;
}
#misiones .progressline{
  font-size:12px!important;
  margin:6px 0 4px!important;
}
#misiones .track{
  height:9px!important;
  margin:3px 0 10px!important;
}

/* Recompensas: no comprimir. Una recompensa debajo de otra si hay varias. */
#misiones .rewards{
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
  margin:4px 0 12px!important;
  flex:1 1 auto;
}

#misiones .mission-reward{
  display:grid!important;
  grid-template-columns:72px minmax(0,1fr)!important;
  gap:10px!important;
  align-items:center!important;
  width:100%!important;
  min-height:82px!important;
  padding:9px!important;
  border-radius:9px!important;
  overflow:hidden;
}

/* Si contiene iframe real, se convierte en preview amplia como el Bazar */
#misiones .mission-reward.gbl-hw-v262-avatar-reward{
  grid-template-columns:150px minmax(0,1fr)!important;
  min-height:158px!important;
}

#misiones .mission-reward .preview{
  width:64px!important;
  min-width:64px!important;
  height:64px!important;
  min-height:64px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  border-radius:8px!important;
  background:rgba(6,3,3,.34)!important;
  border:1px solid rgba(255,91,20,.30)!important;
  padding:0!important;
}

#misiones .mission-reward.gbl-hw-v262-avatar-reward .preview{
  width:150px!important;
  min-width:150px!important;
  height:142px!important;
  min-height:142px!important;
  background:transparent!important;
  border-color:rgba(255,91,20,.24)!important;
}

/* Misma escala que las previews del Bazar */
#misiones .mission-reward.gbl-hw-v262-avatar-reward .preview iframe{
  border:0!important;
  width:190%!important;
  height:190%!important;
  min-width:190%!important;
  min-height:190%!important;
  pointer-events:none!important;
  background:transparent!important;
  flex:0 0 auto!important;
}

#misiones .mission-reward .reward-name{
  font-size:16px!important;
  line-height:1.1!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  word-break:normal!important;
}

#misiones .mission-reward .reward-set{
  font-size:11px!important;
  line-height:1.3!important;
  margin-top:4px!important;
  white-space:normal!important;
}

/* El botón queda al fondo de todas las tarjetas */
#misiones .mission-card > .claim{
  margin-top:auto!important;
  min-height:38px!important;
}

/* Flechas */
#misiones .gbl-hw-v262-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:30;
  width:42px;
  height:70px;
  border:1px solid rgba(255,111,20,.88);
  border-radius:10px;
  background:linear-gradient(180deg,rgba(40,10,4,.94),rgba(14,5,3,.96));
  color:#ffb35f;
  font:900 34px/1 Arial,sans-serif;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 20px rgba(255,75,0,.28);
  transition:opacity .18s ease,transform .18s ease,background .18s ease;
}
#misiones .gbl-hw-v262-nav:hover:not(:disabled){
  background:linear-gradient(180deg,#8f2d00,#3c1000);
  color:#fff;
  transform:translateY(-50%) scale(1.04);
}
#misiones .gbl-hw-v262-nav:disabled{
  opacity:.18;
  cursor:default;
}
#misiones .gbl-hw-v262-prev{left:-14px}
#misiones .gbl-hw-v262-next{right:-14px}
#misiones .gbl-hw-v262-nav[hidden]{display:none!important}

/* Pequeño degradado en bordes cuando existe más contenido */
#misiones .gbl-hw-v262-carousel::before,
#misiones .gbl-hw-v262-carousel::after{
  content:"";
  position:absolute;
  top:8px;
  bottom:14px;
  width:28px;
  pointer-events:none;
  z-index:12;
  opacity:0;
  transition:opacity .2s ease;
}
#misiones .gbl-hw-v262-carousel::before{
  left:8px;
  background:linear-gradient(90deg,rgba(13,4,5,.88),transparent);
}
#misiones .gbl-hw-v262-carousel::after{
  right:8px;
  background:linear-gradient(270deg,rgba(13,4,5,.88),transparent);
}
#misiones .gbl-hw-v262-carousel.gbl-can-prev::before{opacity:1}
#misiones .gbl-hw-v262-carousel.gbl-can-next::after{opacity:1}

/* Responsive */
@media(max-width:1080px){
  #misiones #missionGrid > .mission-card{
    flex-basis:calc((100% - 32px)/3)!important;
  }
}
@media(max-width:780px){
  #misiones #missionGrid > .mission-card{
    flex-basis:calc((100% - 16px)/2)!important;
  }
  #misiones .gbl-hw-v262-prev{left:-8px}
  #misiones .gbl-hw-v262-next{right:-8px}
}
@media(max-width:520px){
  #misiones .gbl-hw-v262-carousel{padding:0 2px}
  #misiones #missionGrid > .mission-card{
    flex-basis:100%!important;
    min-height:350px!important;
  }
  #misiones .gbl-hw-v262-nav{
    width:36px;height:62px;font-size:28px;
  }
  #misiones .gbl-hw-v262-prev{left:2px}
  #misiones .gbl-hw-v262-next{right:2px}
}