/* ============================================================
 * ad.css — 广告位样式（接龙星球 H5）
 * ------------------------------------------------------------
 * 合规要点（不可删改）：
 *   1. 「广告」标识必须常驻可见 —— 广告法要求，删掉会有法律风险
 *   2. 关闭按钮必须存在且可点 —— 用户有权拒绝
 *   3. 广告卡片视觉上必须与内容区分（底色 + 边框），严禁伪装成接龙卡片
 *   4. 触控区 ≥ 24px（WCAG 2.2 AA），本项目用伪元素扩展到 44px
 *   5. 全部使用设计变量，暗色主题自动适配
 * ========================================================== */

/* 挂载容器：广告未投放时高度为 0，不留空白 */
.ad-slot { display: block; }
.ad-slot:empty { display: none; }

/* ---- 卡片 ---- */
.jl-ad {
  position: relative;
  margin: 1.2rem 0;
  padding: 2.4rem 1.4rem 1.4rem;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}

/* 「广告」标识：左上角，常驻 */
.jl-ad__tag {
  position: absolute;
  left: 1.2rem;
  top: .7rem;
  padding: .1rem .5rem;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--text-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xs);
  letter-spacing: .05em;
}

/* 关闭按钮：可见 28px，触控区扩展到 44px */
.jl-ad__close {
  position: absolute;
  right: .6rem;
  top: .6rem;
  width: 2.8rem;
  height: 2.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--text-3);
  background: transparent;
  border: 0;
  border-radius: var(--r-full);
  cursor: pointer;
}
.jl-ad__close::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 4.4rem; height: 4.4rem;
  transform: translate(-50%, -50%);
}
.jl-ad__close:hover { background: var(--bg-hover); color: var(--text); }
.jl-ad__close:focus-visible {
  outline: 2px solid var(--brand-text);
  outline-offset: 2px;
}

/* ---- 主体：图标 + 文案 + 行动按钮 ---- */
.jl-ad__bd {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.jl-ad__icon {
  flex: none;
  width: 4.4rem;
  height: 4.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  background: var(--brand-50);
  border-radius: var(--r-sm);
}

.jl-ad__txt {
  flex: 1;
  min-width: 0; /* 允许文本区域收缩，防止长文案撑破布局 */
}

.jl-ad__title {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jl-ad__desc {
  margin-top: .3rem;
  font-size: var(--fs-xs);
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jl-ad__cta {
  flex: none;
  min-height: 3.6rem;
  padding: 0 1.2rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #fff;
  /* 承载白字的实心填充必须用 brand-700（对比度 5.5:1），不可用 brand-500 */
  background: var(--brand-700);
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: transform .18s ease, opacity .18s ease;
}
.jl-ad__cta:hover { transform: scale(1.05); }
.jl-ad__cta:active { transform: scale(.95); }
.jl-ad__cta:focus-visible {
  outline: 2px solid var(--brand-text);
  outline-offset: 2px;
}

/* ---- 窄屏（≤360px）：隐藏图标，保证文案与按钮完整 ---- */
@media (max-width: 360px) {
  .jl-ad__icon { display: none; }
  .jl-ad__desc { display: none; }
}

/* ---- 兜底 Toast（页面已有 Toast 时不使用） ---- */
.jl-ad-toast {
  position: fixed;
  left: 50%;
  bottom: 12rem;
  transform: translateX(-50%);
  z-index: 9999;
  max-width: 80vw;
  padding: 1rem 1.6rem;
  font-size: var(--fs-sm);
  color: #fff;
  background: rgba(15, 23, 42, .92);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-2);
  animation: jlAdToastIn .2s ease;
}
@keyframes jlAdToastIn {
  from { opacity: 0; transform: translate(-50%, 1rem); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* 注：原「推广位可视化配置表单（我的页）」样式（.promo / .promo__row / .promo__i 等）
   已于 2026-09-19 随该面板一起移除 —— 那个面板把运营配置暴露给了每一个普通用户，
   且只写本机 localStorage、对后台（另一个 origin）完全不可见。现配置入口在后台管理端，
   用户端经 GET /api/ads 读取。此处保留占位说明，避免后来者到处找这段样式去哪了。 */

/* ============================================================
 * 内嵌落地页弹层（action='page'）
 * ========================================================== */
.jl-adpage {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: flex-end;            /* 移动端底部抽屉，拇指可达 */
  justify-content: center;
  background: var(--mask);
  animation: jlAdPageFade var(--dur-base) var(--ease-out);
}
.jl-adpage__panel {
  position: relative;
  width: 100%;
  max-width: 48rem;
  max-height: 86vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-6) var(--sp-5) calc(var(--sp-5) + env(safe-area-inset-bottom));
  background: var(--bg-elev);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-3);
  animation: jlAdPageUp var(--dur-slow) var(--ease-out);
  text-align: center;
}
.jl-adpage__close {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  width: 4.4rem;                    /* 44px 最小触控区 */
  height: 4.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--text-3);
  background: none;
  border: 0;
  cursor: pointer;
}
.jl-adpage__icon {
  font-size: 4.8rem;
  line-height: 1;
  margin-bottom: var(--sp-2);
}
.jl-adpage__title {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--text);
  letter-spacing: .02em;
}
.jl-adpage__sub {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.jl-adpage__list {
  margin: var(--sp-4) 0 0;
  padding: var(--sp-3) var(--sp-4);
  list-style: none;
  text-align: left;
  background: var(--bg-sunken, var(--bg));
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.jl-adpage__list li {
  display: flex;
  gap: var(--sp-2);
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--text-2);
}
.jl-adpage__dot {
  flex: none;
  color: var(--brand-text);
  font-weight: 700;
}
.jl-adpage__qr {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  background: #fff;                 /* 二维码必须白底，否则无法识别 */
  border-radius: var(--r-md);
  display: inline-block;
}
.jl-adpage__qr img {
  width: 16rem;
  height: 16rem;
  display: block;
}
.jl-adpage__qrtip {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.jl-adpage__acts {
  margin-top: var(--sp-5);
  display: flex;
  gap: var(--sp-3);
}
.jl-adpage__btn {
  flex: 1;
  height: 4.8rem;
  font-size: var(--fs-md);
  font-weight: 600;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
}
.jl-adpage__btn:active { transform: scale(.97); }
.jl-adpage__btn:focus-visible {
  outline: 2px solid var(--brand-text);
  outline-offset: 2px;
}
.jl-adpage__btn--primary {
  background: var(--brand-700);      /* 深绿：白字 5.5:1，符合 AA */
  color: #fff;
}
.jl-adpage__btn--ghost {
  background: transparent;
  border-color: var(--border-strong, var(--border));
  color: var(--text-2);
}
.jl-adpage__hint {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--text-3);
}

/* ≥480px：改为居中卡片，避免大屏抽屉过宽 */
@media (min-width: 480px) {
  .jl-adpage { align-items: center; padding: var(--sp-4); }
  .jl-adpage__panel {
    border-radius: var(--r-xl);
    max-height: 80vh;
    padding-bottom: var(--sp-5);
  }
}

@keyframes jlAdPageFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes jlAdPageUp {
  from { opacity: 0; transform: translateY(2rem) }
  to { opacity: 1; transform: translateY(0) }
}

/* ---- 尊重系统「减少动效」偏好 ---- */
@media (prefers-reduced-motion: reduce) {
  .jl-ad__cta { transition: none; }
  .jl-ad__cta:hover, .jl-ad__cta:active { transform: none; }
  .jl-ad-toast { animation: none; }
  .jl-adpage,
  .jl-adpage__panel { animation: none; }
  .jl-adpage__btn { transition: none; }
}