/* ============================================================
   adsx.css — 霓虹风格广告位
   ============================================================
   包含四类广告位：
     1. 图标对联 .ad-couplet-neon
     2. 图片弹窗 .ad-popup-neon-mask / .ad-popup-neon
     3. 底部横幅 .ad-banner-neon
     4. 固定横幅 .ad-inline-neon
   配合 adsx.js 使用
   ============================================================ */


/* ------------------------------------------------------------
   1. 图标对联（左右多图标堆叠）
   ------------------------------------------------------------ */
.ad-couplet-neon {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 72px; z-index: 9000;
  display: flex; flex-direction: column; gap: 12px;
  opacity: 0; pointer-events: none; transition: opacity .4s;
}
.ad-couplet-neon.show { opacity: 1; pointer-events: auto; }
.ad-couplet-neon.left  { left: 16px; }
.ad-couplet-neon.right { right: 16px; }

.ad-couplet-neon .item {
  position: relative; width: 72px; height: 72px;
  animation: adsx-float 3s ease-in-out infinite;
  transition: opacity .3s, transform .3s;
}
.ad-couplet-neon .item.hide { opacity: 0; transform: scale(.6); pointer-events: none; }
.ad-couplet-neon .item:nth-child(2) { animation-delay: -.5s; }
.ad-couplet-neon .item:nth-child(3) { animation-delay: -1s; }
.ad-couplet-neon .item:nth-child(4) { animation-delay: -1.5s; }

.ad-couplet-neon .item a {
  display: block; width: 100%; height: 100%;
  border-radius: 18px; overflow: hidden; position: relative;
  background: linear-gradient(160deg, #120a28 0%, #0d051e 100%);
  border: 1px solid rgba(255,26,107,.5);
  box-shadow: 0 0 20px rgba(139,31,255,.35), 0 0 40px rgba(255,26,107,.15);
}
.ad-couplet-neon .item a::before {
  content: ''; position: absolute; inset: 0; border-radius: 18px;
  background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
  background-size: 200% 200%;
  animation: adsx-shine 2.5s linear infinite;
  pointer-events: none; z-index: 2;
}
.ad-couplet-neon .item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ad-couplet-neon .item .close {
  position: absolute; top: -7px; right: -7px; z-index: 3;
  width: 22px; height: 22px; line-height: 20px; text-align: center;
  border-radius: 50%; background: #000; color: #fff;
  font-size: 14px; cursor: pointer;
  border: 1px solid rgba(255,26,107,.7);
  box-shadow: 0 0 10px rgba(255,26,107,.8);
}

@keyframes adsx-float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}
@keyframes adsx-shine {
  0%   { background-position: -100% -100%; }
  100% { background-position: 200% 200%; }
}


/* ------------------------------------------------------------
   2. 图片弹窗
   ------------------------------------------------------------ */
.ad-popup-neon-mask {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(5,2,15,.78);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 3vh 16px;
  overflow: auto;
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.ad-popup-neon-mask.show { opacity: 1; pointer-events: auto; }

.ad-popup-neon {
  position: relative;
  width: min(720px, 92vw);
  max-height: 94vh;
  border-radius: 20px; overflow: hidden;
  background: linear-gradient(160deg, #120a28 0%, #0d051e 100%);
  border: 1px solid rgba(255,26,107,.4);
  box-shadow: 0 0 80px rgba(139,31,255,.35), 0 0 160px rgba(255,26,107,.2);
  transform: scale(.8); transition: transform .35s cubic-bezier(.2,.9,.3,1.2);
}
.ad-popup-neon-mask.show .ad-popup-neon { transform: scale(1); }
.ad-popup-neon::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #ff1a6b, #00e8ff, transparent);
  animation: adsx-beam 2.5s linear infinite;
  z-index: 3;
}
@keyframes adsx-beam {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.ad-popup-neon a { display: block; }
.ad-popup-neon img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(94vh - 4px);
  object-fit: contain;
}
.ad-popup-neon .close {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; line-height: 32px; text-align: center;
  border-radius: 50%; background: rgba(0,0,0,.6); color: #fff;
  font-size: 20px; cursor: pointer; z-index: 2;
  border: 1px solid rgba(255,26,107,.6);
  box-shadow: 0 0 12px rgba(255,26,107,.5);
}


/* ------------------------------------------------------------
   3. 底部横幅（整张图滑入）
   ------------------------------------------------------------ */
.ad-banner-neon {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
  display: flex; justify-content: center;
  padding: 12px 16px 16px;
  transform: translateY(120%); transition: transform .45s cubic-bezier(.2,.9,.3,1);
}
.ad-banner-neon.show { transform: translateY(0); }

.ad-banner-neon .frame {
  position: relative;
  width: min(900px, 100%);
  border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255,26,107,.5);
  box-shadow:
    0 0 40px rgba(139,31,255,.5),
    0 0 80px rgba(255,26,107,.25),
    0 10px 30px rgba(0,0,0,.5);
  background: #120a28;
}
.ad-banner-neon .frame::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, transparent, #ff1a6b, #00e8ff, #ff1a6b, transparent);
  background-size: 200% 100%;
  animation: adsx-stream 3s linear infinite;
}
@keyframes adsx-stream {
  0%   { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}
.ad-banner-neon a { display: block; }
.ad-banner-neon img { display: block; width: 100%; height: auto; }
.ad-banner-neon .close {
  position: absolute; top: 6px; right: 8px; z-index: 3;
  width: 26px; height: 26px; line-height: 24px; text-align: center;
  border-radius: 50%; background: rgba(0,0,0,.6); color: #fff;
  font-size: 16px; cursor: pointer;
  border: 1px solid rgba(255,26,107,.6);
}


/* ------------------------------------------------------------
   4. 固定位置横幅（嵌入页面流）
   ------------------------------------------------------------ */
.ad-inline-neon {
  position: relative; display: block; margin: 0 auto;
  width: min(900px, 100%);
  border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255,26,107,.5);
  background: #120a28;
  box-shadow:
    0 0 30px rgba(139,31,255,.35),
    0 8px 24px rgba(0,0,0,.4);
}
.ad-inline-neon::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, transparent, #ff1a6b, #00e8ff, #ff1a6b, transparent);
  background-size: 200% 100%;
  animation: adsx-stream 3s linear infinite;
}
.ad-inline-neon::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%);
  background-size: 200% 200%;
  animation: adsx-sweep 4s linear infinite;
}
@keyframes adsx-sweep {
  0%   { background-position: -100% -100%; }
  100% { background-position: 200% 200%; }
}
.ad-inline-neon a { display: block; }
.ad-inline-neon img { display: block; width: 100%; height: auto; }
.ad-inline-neon .label {
  position: absolute; top: 8px; left: 10px; z-index: 3;
  padding: 2px 8px; border-radius: 6px;
  font-size: 11px; letter-spacing: 1px; color: #fff;
  background: rgba(0,0,0,.5); border: 1px solid rgba(255,26,107,.5);
}