/* H5短视频 v1.0 - 前端样式（仿抖音竖屏） */
/* 强制让 hidden 属性生效（避免被 display:flex 覆盖） */
[hidden]{ display:none !important; }

:root{
  --bg:#000;
  --fg:#fff;
  --muted:rgba(255,255,255,.7);
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{height:100%; margin:0; background:var(--bg); color:var(--fg); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial;}
#app{height:100%; width:100%; overflow:hidden; position:relative;}
.stage{
  position:absolute; inset:0;
  transform: translate3d(0,0,0);
  will-change: transform;
}
.slide{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}
.slide video{
  width:100%; height:100%;
  object-fit:cover;
  background:#000;
}
.slide[data-slot="prev"]{transform: translate3d(0,-100%,0);}
.slide[data-slot="cur"]{transform: translate3d(0,0,0);}
.slide[data-slot="next"]{transform: translate3d(0,100%,0);}

.hud{
  position:absolute; inset:0;
  pointer-events:none;
}
.uploader{
  position:relative;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
}

.avatar{
  width:48px; height:48px; border-radius:50%;
  border:2px solid rgba(255,255,255,.85);
  background:rgba(255,255,255,.08);
}
.actions{
  position:absolute; right:10px; bottom:calc(20px + var(--safe-bottom));
  display:flex; flex-direction:column; gap:14px;
  pointer-events:auto;
}
.action-btn{
  width:64px;
  border:0; background:transparent; color:var(--fg);
  display:flex; flex-direction:column; align-items:center; gap:4px;
  font-size:14px;
}
.action-btn .icon{
  width:44px; height:44px; border-radius:22px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
  font-size:20px;
}
.action-btn.active .icon{ background:rgba(255,64,128,.22); }
.action-btn .count{ color:var(--muted); font-size:12px; }
.toast{
  position:absolute; left:50%; bottom:120px;
  transform:translateX(-50%);
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.14);
  padding:10px 12px; border-radius:999px;
  color:var(--fg);
  font-size:13px;
  pointer-events:none;
}

/* 广告 */
.ad-mask{
  position:absolute; inset:0;
  background:rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  pointer-events:auto;
}
.ad-card{
  position:relative;
  width:min(70vw, 360px);
  max-height:50vh;
  background:rgba(20,20,20,.86);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
}
.ad-close{
  position:absolute; top:8px; right:8px;
  border:0; background:rgba(255,255,255,.12);
  color:var(--fg);
  width:34px; height:34px; border-radius:17px;
  cursor:pointer;
}
.ad-img{
  display:block;
  width:100%;
  max-height:calc(50vh - 46px);
  object-fit:contain;
  background:#000;
}
.ad-title{
  padding:10px 12px;
  font-size:14px;
  color:rgba(255,255,255,.85);
}

/* 我的 */
.me-mask{
  position:absolute; inset:0;
  background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
  padding:18px;
  pointer-events:auto;
}
.me-card{
  width:min(92vw, 420px);
  border-radius:18px;
  background:rgba(20,20,20,.92);
  border:1px solid rgba(255,255,255,.12);
  padding:16px;
}
.me-title{font-size:16px; margin-bottom:10px;}
.me-body{font-size:14px; color:rgba(255,255,255,.86); line-height:1.6;}
.me-close{
  margin-top:12px;
  width:100%;
  border:0;
  background:rgba(255,255,255,.12);
  color:#fff;
  padding:10px 12px;
  border-radius:12px;
}
/* 中间暂停/播放提示 */
.pp-indicator{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; z-index:30;
}
.pp-bubble{
  width:72px; height:72px; border-radius:999px;
  background:rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.9);
  transition:opacity .15s ease, transform .15s ease;
}
.pp-indicator.show .pp-bubble{
  opacity:1; transform:scale(1);
}
.pp-ico{
  width:34px; height:34px;
  fill:rgba(255,255,255,.92);
}
html, body{
  height:100%;
  overflow:hidden;
  overscroll-behavior: none; /* 禁止下拉刷新/回弹链 */
}
#stage{
  touch-action: none; /* 告诉浏览器手势交给JS处理 */
}
#stage{ will-change: transform; }
.slide, video{ backface-visibility:hidden; -webkit-backface-visibility:hidden; }
video{ background:#000; }
html, body{ height:100%; overflow:hidden; overscroll-behavior:none; }
#stage{ touch-action:none; }