/* MMOCodeX Twitch top stream slider */
.mcx-twitch-slider {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 246px;
  margin: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--accent, #68dcad) 32%, transparent);
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 0, color-mix(in srgb, var(--accent, #68dcad) 18%, transparent), transparent 48%),
    linear-gradient(180deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, .24));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035), 0 18px 42px rgba(0, 0, 0, .24);
  overflow: hidden;
}
.aion-hero-timers .mcx-twitch-slider {
  min-height: 214px;
  margin: 0;
}
.mcx-twitch-slider::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 34%, rgba(0, 0, 0, .16));
}
.mcx-twitch-head,
.mcx-twitch-footer,
.mcx-twitch-slide-copy {
  position: relative;
  z-index: 3;
}
.mcx-twitch-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 0;
}
.mcx-twitch-title span {
  display: block;
  color: var(--mint, #68dcad);
  font-size: .62rem;
  font-weight: 950;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.mcx-twitch-title strong {
  display: block;
  margin-top: 3px;
  color: #fff6d7;
  font-size: .98rem;
  line-height: 1.15;
}
.mcx-twitch-controls {
  display: inline-flex;
  gap: 6px;
}
.mcx-twitch-controls button,
.mcx-twitch-dots button {
  border: 1px solid rgba(104, 220, 173, .22);
  background: rgba(0, 0, 0, .32);
  color: #eafff6;
  cursor: pointer;
}
.mcx-twitch-controls button {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  font-weight: 950;
}
.mcx-twitch-controls button:hover,
.mcx-twitch-dots button.is-active {
  border-color: color-mix(in srgb, var(--accent, #68dcad) 58%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent, #68dcad) 22%, transparent);
}
.mcx-twitch-viewport {
  position: relative;
  z-index: 2;
  overflow: hidden;
  min-height: 148px;
}
.mcx-twitch-track {
  display: flex;
  transition: transform .34s ease;
  will-change: transform;
}
.mcx-twitch-slide {
  position: relative;
  flex: 0 0 100%;
  min-height: 158px;
  padding: 72px 14px 14px;
  display: flex;
  align-items: flex-end;
  background: #020705;
  overflow: hidden;
}
.mcx-twitch-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .06), rgba(0, 0, 0, .82)),
    var(--mcx-stream-image, none) center / cover no-repeat;
  opacity: .86;
  transform: scale(1.04);
}
.mcx-twitch-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--accent, #68dcad) 20%, transparent), transparent 36%);
  pointer-events: none;
}
.mcx-twitch-slide.is-empty::before,
.mcx-twitch-slide.is-error::before {
  opacity: .18;
  background:
    radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--accent, #68dcad) 24%, transparent), transparent 42%),
    linear-gradient(180deg, rgba(8, 28, 20, .72), rgba(0, 0, 0, .78));
}
.mcx-twitch-slide-copy {
  display: grid;
  gap: 7px;
  width: 100%;
}
.mcx-twitch-badge {
  width: max-content;
  max-width: 100%;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border: 1px solid rgba(255, 92, 116, .52);
  border-radius: 999px;
  background: rgba(30, 2, 7, .66);
  color: #ffd8de;
  font-size: .62rem;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.mcx-twitch-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #ff5c74;
  box-shadow: 0 0 14px rgba(255, 92, 116, .72);
}
.mcx-twitch-slide h3 {
  margin: 0;
  color: #fff;
  font-size: 1.06rem;
  line-height: 1.1;
  font-weight: 950;
}
.mcx-twitch-slide p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0;
  overflow: hidden;
  color: rgba(239, 255, 248, .76);
  font-size: .84rem;
  line-height: 1.36;
}
.mcx-twitch-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px 14px;
}
.mcx-twitch-watch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--accent, #68dcad) 48%, transparent);
  border-radius: 999px;
  background: rgba(0, 0, 0, .42);
  color: #eafff6;
  text-decoration: none;
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mcx-twitch-watch:hover {
  border-color: color-mix(in srgb, var(--accent, #68dcad) 72%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--accent, #68dcad) 18%, transparent);
}
.mcx-twitch-dots {
  display: inline-flex;
  gap: 5px;
  min-width: 0;
}
.mcx-twitch-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border-radius: 999px;
  opacity: .62;
}
.mcx-twitch-dots button.is-active {
  width: 18px;
  opacity: 1;
}
@media (max-width: 1080px) {
  .mcx-twitch-slider { margin-bottom: 18px; }
}
@media (max-width: 640px) {
  .mcx-twitch-slider { min-height: 224px; border-radius: 18px; }
  .mcx-twitch-slide { min-height: 146px; padding-top: 64px; }
  .mcx-twitch-title strong { font-size: .92rem; }
}