/* 银河带货直播间 */
.adx-live .adx-stage {
  background:
    radial-gradient(ellipse at 28% 0, rgba(255, 46, 166, .16), transparent 43%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #1c0725, #0c0311 55%, #19071d);
}

.adxl-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: clamp(10px, 1.7vw, 22px);
}

.adxl-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 9px;
  padding: 7px 9px;
  color: #d8c6dc;
  background: rgba(15, 5, 18, .72);
  border: 1px solid #4d2b56;
}

.adxl-live-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}

.adxl-live-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  color: #fff3e2;
  background: #cc1a3d;
  font-family: var(--adx-mono);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .05em;
}

.adxl-live-tag i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: adxl-blink 1s steps(1) infinite;
}

.adxl-live-tag.is-dead { background: #5f5367; }

@keyframes adxl-blink { 50% { opacity: .2; } }

.adxl-live-title b {
  font-family: var(--adx-serif);
  font-size: clamp(12px, 1.35vw, 16px);
}

.adxl-live-title small {
  color: #967e9c;
  font-family: var(--adx-serif);
  font-size: 8px;
}

.adxl-viewers {
  display: flex;
  align-items: baseline;
  gap: 5px;
  color: var(--adx-cyan);
  font-family: var(--adx-mono);
  font-size: 11px;
}

.adxl-viewers small {
  color: #77627d;
  font-family: var(--adx-serif);
  font-size: 7px;
}

.adxl-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 300px);
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
}

.adxl-screen {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.adxl-video {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 380px;
  border: 2px solid #512b5a;
  background: #05010a;
}

.adxl-video-top {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  padding: 4px 8px;
  color: #7c6683;
  background: #100616;
  border-bottom: 1px solid #3d2145;
  font-family: var(--adx-mono);
  font-size: 7px;
}

.adxl-video-top span:first-child { color: #ff627d; }
.adxl-video-top span:last-child { margin-left: auto; }

.adxl-stage {
  position: relative;
  flex: 1;
  min-height: 300px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 76%, rgba(255, 46, 166, .17), transparent 58%),
    radial-gradient(ellipse at 50% 20%, rgba(255, 225, 76, .09), transparent 43%),
    linear-gradient(180deg, #15051d, #09020e 75%);
}

.adxl-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 46, 166, .06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(101, 249, 255, .04) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse at center, #000, transparent 78%);
}

.adxl-host {
  position: absolute;
  left: 50%;
  bottom: 6%;
  z-index: 3;
  width: min(48%, 330px);
  transform: translateX(-50%);
  filter: drop-shadow(0 13px 0 rgba(0, 0, 0, .22));
  transition: filter .15s;
}

.adxl-star {
  display: block;
  width: 100%;
  height: auto;
  animation: adxl-host-bob 3.8s ease-in-out infinite;
}

@keyframes adxl-host-bob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-7px) rotate(1.5deg); }
}

.adxl-host.is-shocked .adxl-star { animation: adxl-shock .4s ease-in-out; }
@keyframes adxl-shock {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(-8px, 1px) rotate(-3deg); }
  50% { transform: translate(8px, -2px) rotate(3deg); }
  75% { transform: translate(-4px, 0) rotate(-1deg); }
}

.adxl-host.is-rocket .adxl-star { animation: adxl-rocket .65s ease-in-out; }
@keyframes adxl-rocket {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(-45px) rotate(8deg); }
}

.adxl-host-bubble {
  position: absolute;
  left: 50%;
  top: 10%;
  z-index: 6;
  max-width: min(78%, 440px);
  padding: 7px 10px;
  color: #2b0914;
  background: #fff0d4;
  border: 2px solid #28060c;
  box-shadow: 3px 4px 0 rgba(0, 0, 0, .4);
  font-family: var(--adx-serif);
  font-size: clamp(10px, .9vw, 13px);
  line-height: 1.5;
  opacity: 0;
  transform: translate(-50%, 6px) rotate(-1deg);
  transition: opacity .16s, transform .16s;
  pointer-events: none;
}

.adxl-host-bubble.is-showing {
  opacity: 1;
  transform: translate(-50%, 0) rotate(-1deg);
}

.adxl-host-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  border: 5px solid transparent;
  border-top-color: #fff0d4;
  transform: translateX(-50%);
}

.adxl-sos {
  position: absolute;
  left: 61%;
  bottom: 18%;
  z-index: 7;
  display: grid;
  grid-template-columns: auto;
  place-items: center;
  min-width: 76px;
  min-height: 54px;
  padding: 6px 8px;
  color: #2b090e;
  background:
    repeating-linear-gradient(0deg, rgba(134, 92, 37, .1) 0 1px, transparent 1px 4px),
    #fff0b2;
  border: 2px solid #37100c;
  box-shadow: 3px 4px 0 rgba(0, 0, 0, .35);
  font-family: var(--adx-serif);
  font-size: 8px;
  line-height: 1.2;
  text-align: center;
  transform: rotate(8deg);
  animation: adxl-sos-pulse 1.8s ease-in-out infinite;
  cursor: pointer;
}

.adxl-sos[hidden] { display: none; }
.adxl-sos b { color: #a81821; font-size: 20px; line-height: 1; letter-spacing: .08em; }
.adxl-sos span { font-size: 7px; }
.adxl-sos i {
  position: absolute;
  right: -35px;
  top: 45%;
  color: #e4c986;
  font-family: var(--adx-serif);
  font-size: 8px;
  font-style: normal;
  white-space: nowrap;
  transform: rotate(-8deg);
}

@keyframes adxl-sos-pulse {
  0%, 100% { box-shadow: 3px 4px 0 rgba(0, 0, 0, .35); filter: brightness(1); }
  50% { box-shadow: 0 0 22px rgba(255, 232, 74, .55), 3px 4px 0 rgba(0, 0, 0, .35); filter: brightness(1.12); }
}

.adxl-sos:hover {
  color: #fff0cf;
  background: #a51228;
}

.adxl-sos:hover b { color: #fff2d6; }

.adxl-chyron {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 5;
  padding: 4px 7px;
  color: #3a0a04;
  background: rgba(255, 228, 74, .93);
  font-family: var(--adx-serif);
  font-size: 8px;
}

.adxl-chyron span {
  margin-right: 6px;
  padding: 1px 4px;
  color: #fff2db;
  background: #b81c2c;
  font-family: var(--adx-mono);
  font-size: 7px;
}

.adxl-onair {
  position: absolute;
  right: 11px;
  top: 11px;
  z-index: 8;
  color: #ff5d73;
  font-family: var(--adx-mono);
  font-size: 8px;
  letter-spacing: .12em;
  animation: adxl-blink 1.4s steps(1) infinite;
}

.adxl-admin {
  position: absolute;
  left: 50%;
  top: 24%;
  z-index: 20;
  width: min(400px, 82%);
  padding: 10px 12px;
  color: #d9f6e8;
  background: rgba(8, 25, 20, .95);
  border: 2px solid #56d6a4;
  box-shadow: 4px 5px 0 rgba(0, 0, 0, .46), 0 0 28px rgba(86, 214, 164, .2);
  transform: translateX(-50%);
  animation: adxl-admin-in .24s ease-out both;
}

@keyframes adxl-admin-in {
  from { opacity: 0; transform: translate(-50%, -10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.adxl-admin > span {
  color: #6eaa91;
  font-family: var(--adx-mono);
  font-size: 7px;
}

.adxl-admin b {
  display: block;
  margin: 4px 0;
  color: #cfffe2;
  font-family: var(--adx-serif);
  font-size: 16px;
}

.adxl-admin p {
  margin: 0 0 4px;
  color: #a5d3bb;
  font-family: var(--adx-serif);
  font-size: 10px;
}

.adxl-admin em {
  color: #ffe16a;
  font-style: normal;
}

.adxl-admin small {
  color: #5e967d;
  font-family: var(--adx-mono);
  font-size: 7px;
}

.adxl-glitch {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  opacity: 0;
}

.adxl-stage.is-glitching .adxl-glitch {
  opacity: 1;
  background:
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(255, 255, 255, .12) 7px 8px),
    linear-gradient(90deg, rgba(255, 46, 166, .22), transparent 24%, transparent 76%, rgba(101, 249, 255, .2));
  mix-blend-mode: screen;
  animation: adxl-glitch .18s steps(2) infinite;
}

@keyframes adxl-glitch {
  0% { transform: translateX(0); opacity: .35; }
  50% { transform: translateX(4px); opacity: .8; }
  100% { transform: translateX(-3px); opacity: .3; }
}

.adxl-stage.is-shut .adxl-grid,
.adxl-stage.is-shut .adxl-chyron,
.adxl-stage.is-shut .adxl-onair {
  opacity: .18;
}

.adxl-stage.is-shut .adxl-host {
  filter: grayscale(.7) opacity(.3);
}

.adxl-stage.is-shut .adxl-glitch {
  opacity: .35;
}

.adxl-metrics {
  display: flex;
  gap: 14px;
  flex: none;
  padding: 5px 8px;
  color: #886c90;
  background: #0c0412;
  border-top: 1px solid #31183a;
  font-family: var(--adx-mono);
  font-size: 8px;
}

.adxl-metrics b { color: #ffc6df; font-weight: 400; }

.adxl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

.adxl-button {
  min-height: 40px;
  padding: 7px 12px;
  border: 2px solid #22070e;
  color: #fff1d4;
  background: #7e1b2d;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .35);
  font-family: var(--adx-font);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.adxl-button:hover { filter: brightness(1.15); transform: translateY(-1px); }
.adxl-button:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.adxl-button--gold { color: #2b1005; background: linear-gradient(#ffe66d, #f3ba2e); }
.adxl-button--pink { color: #2e0617; background: #ff8fc9; }
.adxl-button--ghost { color: #c8b0cd; background: #2e1937; border-color: #654473; }

.adxl-tip {
  margin: 5px 0 0;
  color: #7e657c;
  font-family: var(--adx-serif);
  font-size: 8px;
}

.adxl-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: 2px solid #46264c;
  background: #100616;
}

.adxl-side-head,
.adxl-sidefoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  padding: 5px 7px;
  color: #a78eab;
  background: #1c0d23;
  border-bottom: 1px solid #3b2144;
  font-family: var(--adx-mono);
  font-size: 7px;
}

.adxl-side-head span:first-child { color: #ffc1dd; }

.adxl-sidefoot {
  border-top: 1px solid #3b2144;
  border-bottom: 0;
  color: #6d596f;
}

.adxl-chat {
  flex: 1;
  min-height: 190px;
  overflow: auto;
  padding: 6px;
  scrollbar-width: thin;
  scrollbar-color: #5c3b63 #120718;
}

.adxl-chat-row {
  display: flex;
  gap: 5px;
  margin: 0 0 4px;
  padding: 4px 5px;
  color: #c2b0c7;
  background: rgba(255, 255, 255, .025);
  border: 1px solid transparent;
  font-family: var(--adx-serif);
  font-size: 8px;
  line-height: 1.45;
  animation: adxl-chat-in .2s ease-out both;
}

@keyframes adxl-chat-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.adxl-chat-row b {
  flex: none;
  color: #dca0bb;
  font-family: var(--adx-font);
  font-size: 7px;
}

.adxl-chat-row span { color: #a99aad; }

.adxl-chat-row.is-host {
  border-color: #71334f;
  background: rgba(255, 46, 166, .07);
}

.adxl-chat-row.is-host b { color: var(--adx-yellow); }
.adxl-chat-row.is-ad { border-color: #5c4a23; background: rgba(255, 216, 68, .06); }
.adxl-chat-row.is-ad b { color: #d0a335; }
.adxl-chat-row.is-gold b { color: #ffd25a; }
.adxl-chat-row.is-system {
  border-color: #2e6054;
  background: rgba(84, 214, 165, .06);
}
.adxl-chat-row.is-system b { color: #83d6b4; }

.adxl-bottom-ticker {
  flex: none;
  margin-top: 8px;
  padding: 4px 8px;
  overflow: hidden;
  color: #9b7b88;
  background: #0c040f;
  border: 1px solid #38213b;
  font-family: var(--adx-serif);
  font-size: 8px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.adxl-end {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(5, 1, 7, .78);
  backdrop-filter: blur(2px);
}

.adxl-end[hidden] { display: none; }

.adxl-end-card {
  position: relative;
  width: min(520px, 100%);
  padding: 22px 18px 16px;
  color: #2c0a12;
  background:
    repeating-linear-gradient(0deg, rgba(90, 35, 12, .035) 0 1px, transparent 1px 5px),
    #f4e6c8;
  border: 3px solid #23060a;
  box-shadow: 9px 10px 0 rgba(0, 0, 0, .5), 0 0 40px rgba(255, 46, 166, .2);
  text-align: center;
}

.adxl-end-kicker {
  display: inline-block;
  padding: 2px 6px;
  color: #fff4da;
  background: #27201e;
  font-family: var(--adx-mono);
  font-size: 8px;
}

.adxl-end-stamp {
  position: absolute;
  right: 21px;
  top: 20px;
  display: grid;
  place-items: center;
  width: 69px;
  height: 69px;
  border: 3px double #b22226;
  border-radius: 50%;
  color: #b22226;
  font-family: var(--adx-serif);
  font-size: 20px;
  font-weight: 900;
  transform: rotate(-13deg);
  opacity: .72;
}

.adxl-end-card h2 {
  margin: 8px 0 5px;
  color: #a01b24;
  font-family: var(--adx-serif);
  font-size: clamp(25px, 4vw, 40px);
}

.adxl-end-card p {
  margin: 0 0 10px;
  color: #75553b;
  font-family: var(--adx-serif);
  font-size: 10px;
  line-height: 1.6;
}

.adxl-coupon {
  margin: 10px auto;
  padding: 10px;
  border: 2px dashed #9e783e;
  background: #fffaec;
}

.adxl-coupon span {
  display: block;
  color: #9a773f;
  font-family: var(--adx-mono);
  font-size: 7px;
}

.adxl-coupon b {
  display: block;
  margin: 2px 0;
  color: #a51426;
  font-family: var(--adx-mono);
  font-size: clamp(18px, 3vw, 28px);
  letter-spacing: .08em;
}

.adxl-coupon small {
  color: #a68960;
  font-family: var(--adx-serif);
  font-size: 7px;
}

.adxl-coupon.is-void {
  filter: grayscale(1) opacity(.45);
  text-decoration: line-through;
}

.adxl-end-small {
  color: #9e8060 !important;
  font-size: 8px !important;
}

.adxl-end-card .adxl-button { margin: 3px; }

.adxl-dead {
  width: min(680px, 100%);
  margin: 8vh auto;
  padding: 26px;
  color: #d3c3d4;
  background: #0d0610;
  border: 2px solid #4c2e53;
  text-align: center;
}

.adxl-dead h1 {
  margin: 10px 0;
  color: #cda7b7;
  font-family: var(--adx-serif);
  font-size: clamp(28px, 4vw, 46px);
}

.adxl-dead p {
  color: #a68a9a;
  font-family: var(--adx-serif);
  font-size: 11px;
  line-height: 1.7;
}

.adxl-dead-coupon {
  margin: 12px auto;
  padding: 9px;
  color: #947142;
  border: 1px dashed #70583e;
  font-family: var(--adx-serif);
  font-size: 9px;
}

.adxl-dead-coupon b {
  display: block;
  margin-top: 3px;
  color: #d1b46f;
  font-size: 14px;
}

.adxl-dead-small {
  color: #6e5569 !important;
  font-size: 8px !important;
}

@media (max-width: 900px) {
  .adxl-main { grid-template-columns: minmax(0, 1fr) 230px; }
}

@media (max-width: 800px) {
  .adxl-wrap { padding: 7px 7px 18px; }
  .adxl-top { align-items: flex-start; }
  .adxl-main { display: flex; flex-direction: column; gap: 7px; }
  .adxl-video { min-height: 0; }
  .adxl-stage { min-height: 290px; }
  .adxl-host { width: min(62%, 245px); bottom: 5%; }
  .adxl-sos { left: auto; right: 7%; bottom: 17%; min-width: 66px; transform: rotate(6deg); }
  .adxl-sos i { display: none; }
  .adxl-side { min-height: 160px; max-height: 210px; }
  .adxl-chat { min-height: 110px; }
  .adxl-side-head { padding: 4px 6px; }
  .adxl-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .adxl-actions .adxl-button { min-height: 43px; }
  .adxl-actions .adxl-button:last-child { grid-column: 1 / -1; }
  .adxl-tip { font-size: 7px; }
  .adxl-bottom-ticker { margin-top: 5px; font-size: 7px; }
  .adxl-end { padding: 10px; }
  .adxl-end-card { padding: 18px 12px 13px; }
  .adxl-end-stamp { right: 11px; top: 14px; width: 54px; height: 54px; font-size: 15px; }
  .adxl-end-card .adxl-button { width: 100%; margin: 3px 0; }
  .adxl-video-top span:last-child { display: none; }
  .adxl-host-bubble { top: 7%; max-width: 83%; font-size: 10px; }
  .adxl-admin { top: 20%; width: 90%; }
}

body.mild .adxl-star,
body.mild .adxl-live-tag i,
body.mild .adxl-onair,
body.mild .adxl-sos,
body.mild .adxl-stage.is-glitching .adxl-glitch {
  animation: none !important;
}