/* ---------- Fuente DM Serif Display (Google) ---------- */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap');

/* ---------- Variables Clash Royale (paleta ajustada al juego móvil) ---------- */
:root{
  --clash-royal-blue: #1E5FE4;
  --clash-royal-deep: #14376B;
  --clash-gold: #F5C85C;
  --clash-warm: #FFDDAA;
  --clash-wood: #8A5A2A;
  --clash-stone: #3A3F44;
  --clash-ivory: #FFF9F0;
  --clash-shadow: rgba(10,10,10,0.45);
  --clash-accent: #FFCE3A;
  --clash-font: 'DM Serif Display', serif;
  --clash-radius: 14px;
  --clash-card-pad: 18px;
}

/* ---------- Contenedor principal (tema Clash Royale) ---------- */
.sliderarcade-design-clash .sliderarcade-container{
  background: linear-gradient(180deg, #eaf3ff 0%, #f7fbff 45%, var(--clash-warm) 100%);
  border-radius: 18px;
  max-width: 1400px;
  margin: 0 auto 120px;
  padding: 28px 28px 150px;
  position: relative;
  overflow: visible;
  box-shadow: 0 18px 50px var(--clash-shadow);
  font-family: var(--clash-font);
}

/* decorative soft highlight under border */
.sliderarcade-design-clash .sliderarcade-container::before{
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 12px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(245,200,92,0.06), rgba(30,95,228,0.03));
  z-index: 0;
}

/* ensure slides render above the overlay */
.sliderarcade-design-clash .sliderarcade-slide{
  position: relative;
  z-index: 1;
  padding: 0 14px;
}

/* ---------- Tarjeta estilo cofre / carta ---------- */
.sliderarcade-design-clash .sliderarcade-product{
  background: linear-gradient(180deg, var(--clash-ivory) 0%, #fff7e6 100%);
  border-radius: var(--clash-radius);
  padding: var(--clash-card-pad);
  position: relative;
  overflow: visible;
  box-shadow: 0 10px 30px rgba(30,95,228,0.08), 0 6px 18px rgba(0,0,0,0.08);
  transition: transform .36s cubic-bezier(.2,.9,.2,1), box-shadow .28s;
  aspect-ratio: 4/3;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border: 3px solid rgba(138,90,42,0.08);
}

/* subtle top gleam bar */
.sliderarcade-design-clash .sliderarcade-product::before{
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 12px;
  height: 10px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(255,255,255,0.16), rgba(255,255,255,0));
  pointer-events:none;
  z-index: 2;
}

/* hover lift */
.sliderarcade-design-clash .sliderarcade-product:hover{
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 30px 80px rgba(30,95,228,0.12);
  z-index: 6;
}

/* ---------- Imagen principal (card art) ---------- */
.sliderarcade-design-clash .sliderarcade-product-img{
  width:100%;
  max-height: 320px;
  object-fit: contain;
  border-radius:12px;
  border: 6px solid rgba(245,200,92,0.18);
  background: linear-gradient(180deg,#fffef8,#fff2d9);
  box-shadow: inset 0 4px 12px rgba(0,0,0,0.06), 0 12px 30px rgba(0,0,0,0.12);
  transition: transform .56s cubic-bezier(.2,.9,.2,1), filter .28s;
  transform-origin: center;
}
.sliderarcade-design-clash .sliderarcade-product:hover .sliderarcade-product-img{
  transform: translateY(-6px) rotate(-2deg) scale(1.03);
  filter: saturate(1.06) contrast(1.03);
}

/* ---------- Ribbon / rarity pill ---------- */
.sliderarcade-design-clash .sliderarcade-ribbon{
  position:absolute;
  left:16px;
  top:16px;
  z-index:6;
  background: linear-gradient(90deg, var(--clash-royal-blue), #7fb0ff);
  color: var(--clash-ivory);
  padding:8px 12px;
  border-radius:999px;
  font-weight:700;
  box-shadow: 0 8px 22px rgba(30,95,228,0.12);
  transform-origin:left center;
  transition: transform .22s ease;
  font-size:0.95rem;
}
.sliderarcade-design-clash .sliderarcade-product:hover .sliderarcade-ribbon{ transform: translateY(-6px) scale(1.03); }

/* ---------- Title, subtitle ---------- */
.sliderarcade-design-clash .sliderarcade-product-title{
  font-size:1.55rem;
  font-weight:700;
  color: var(--clash-stone);
  letter-spacing:.4px;
  margin: 10px 0 6px;
  display:inline-block;
  background: linear-gradient(90deg, rgba(255,250,240,0.95), rgba(255,245,220,0.95));
  padding:6px 10px;
  border-radius:8px;
  border:2px solid rgba(0,0,0,0.04);
  transition: transform .28s ease, box-shadow .28s;
}
.sliderarcade-design-clash .sliderarcade-product:hover .sliderarcade-product-title{
  transform: translateY(-4px);
  box-shadow: 0 8px 22px rgba(230,197,122,0.06);
}

.sliderarcade-design-clash .sliderarcade-product-sub{
  color: #6b6f75;
  font-weight:700;
  font-size:0.95rem;
  margin-bottom:8px;
  text-transform: none;
}

/* ---------- Description / stats ---------- */
.sliderarcade-design-clash .sliderarcade-product-description{
  color: #2b2f33;
  font-size:1rem;
  line-height:1.34;
  min-height:2.5em;
  margin-bottom:10px;
  transition: color .22s ease;
}
.sliderarcade-design-clash .sliderarcade-stats{
  display:flex;
  gap:8px;
  justify-content:center;
  align-items:center;
  margin-top:6px;
}
.sliderarcade-design-clash .sliderarcade-stat{
  background: linear-gradient(180deg,#fff,#fff6e6);
  border:2px solid rgba(0,0,0,0.06);
  padding:8px 10px;
  border-radius:10px;
  font-weight:800;
  font-size:0.95rem;
  box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}

/* ---------- Elixir / meter accent ---------- */
.sliderarcade-design-clash .sliderarcade-elixir{
  position:relative;
  height:10px;
  background:linear-gradient(90deg,#f7f2e6,#eef6ff);
  border-radius:999px;
  overflow:hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.sliderarcade-design-clash .sliderarcade-elixir > i{
  display:block;
  height:100%;
  width:40%;
  background: linear-gradient(90deg,var(--clash-royal-blue), #9bd1ff);
  animation: elixirFlow 2.6s linear infinite;
}
@keyframes elixirFlow{ 0%{ transform:translateX(-100%);}100%{ transform:translateX(0%);} }

/* ---------- Buttons / actions ---------- */
.sliderarcade-design-clash .sliderarcade-actions{
  display:flex;
  gap:12px;
  justify-content:center;
  margin-top:12px;
  align-items:center;
}
.sliderarcade-design-clash .sliderarcade-qty{
  width:86px;
  padding:10px;
  border-radius:10px;
  text-align:center;
  font-weight:800;
  background: linear-gradient(180deg,#fff,#f3f6ff);
  border:3px solid rgba(218,231,255,0.8);
  color:var(--clash-stone);
  box-shadow: inset 0 4px 10px rgba(0,0,0,0.04);
}
.sliderarcade-design-clash .sliderarcade-add-to-cart{
  min-width:200px;
  padding:12px 20px;
  border-radius:12px;
  cursor:pointer;
  font-weight:900;
  background: linear-gradient(90deg,var(--clash-gold), #ffd36b);
  color:var(--clash-stone);
  border:3px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 30px rgba(230,197,122,0.12);
  transition: transform .22s ease, box-shadow .24s ease, filter .22s;
  position:relative;
  overflow:visible;
}
.sliderarcade-design-clash .sliderarcade-add-to-cart:hover{
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 22px 60px rgba(30,95,228,0.12);
  filter: saturate(1.05);
}

/* click sparkle */
.sliderarcade-design-clash .sliderarcade-add-to-cart:active::after{
  content: "";
  position:absolute;
  width:160px;
  height:160px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(0);
  border-radius:50%;
  background: radial-gradient(circle,#fff8d6 0%, #ffd36b 35%, transparent 60%);
  opacity:0.95;
  animation: chestSpark .55s ease forwards;
  pointer-events:none;
  z-index:4;
}
@keyframes chestSpark{ to{ transform:translate(-50%,-50%) scale(1.5); opacity:0; } }

/* ---------- Dots (arena banners) ---------- */
.sliderarcade-design-clash .slick-dots{
  position:absolute;
  bottom:-78px;
  left:0;
  right:0;
  display:flex !important;
  justify-content:center;
  gap:12px;
}
.sliderarcade-design-clash .slick-dots li{ width:16px; height:16px; }
.sliderarcade-design-clash .slick-dots button{
  width:16px; height:16px; padding:0; border-radius:50%; cursor:pointer; position:relative; background:transparent;
}
.sliderarcade-design-clash .slick-dots button::before{
  content: "";
  position:absolute;
  inset:0;
  border-radius:50%;
  background: linear-gradient(180deg,#ffe6a6,#ffd36b);
  border:2px solid #a87a3b;
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.12);
}
.sliderarcade-design-clash .slick-dots .slick-active button{ transform: scale(1.28); box-shadow: 0 8px 24px rgba(160,120,60,0.14); }

/* ---------- Arrows (crown glyph) ---------- */
.sliderarcade-design-clash .slick-arrow{
  position:absolute; top:50%; transform:translateY(-50%); width:56px; height:56px; border-radius:50%;
  background: linear-gradient(180deg,#fff,#f6f1e6);
  border:4px solid #d6b06b;
  cursor:pointer; z-index:8;
  box-shadow: 0 8px 20px rgba(0,0,0,0.16); transition: transform .18s ease, box-shadow .18s;
}
.sliderarcade-design-clash .slick-prev{ left:-40px; }
.sliderarcade-design-clash .slick-next{ right:-40px; }
.sliderarcade-design-clash .slick-arrow:hover{ transform: scale(1.08) rotate(-6deg); box-shadow: 0 12px 36px rgba(0,0,0,0.22); }
.sliderarcade-design-clash .slick-arrow::before{
  font-family: "Font Awesome 5 Free"; font-weight:900; font-size:22px; color:#6b4a23;
}
.sliderarcade-design-clash .slick-prev::before{ content:"\f104"; }
.sliderarcade-design-clash .slick-next::before{ content:"\f105"; }

/* ---------- Accessibility focus ---------- */
.sliderarcade-design-clash .slick-arrow:focus,
.sliderarcade-design-clash .sliderarcade-add-to-cart:focus,
.sliderarcade-design-clash .sliderarcade-qty:focus{
  outline: 3px solid rgba(30,95,228,0.18);
  outline-offset:4px;
}

/* ---------- Responsive tweaks ---------- */
@media (max-width:768px){
  .sliderarcade-design-clash .sliderarcade-product-title{ font-size:1.35rem; }
  .sliderarcade-design-clash .sliderarcade-product-img{ max-height:220px; }
  .sliderarcade-design-clash .slick-prev{ left:-22px; } .sliderarcade-design-clash .slick-next{ right:-22px; }
  .sliderarcade-design-clash .slick-dots{ bottom:-88px; }
}