*{box-sizing:border-box}
html,body,.page{height:100%;margin:0}
body{background:#000;color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.page{position:relative}

.video-wrap{position:relative;height:100vh;width:100vw;overflow:hidden}
#video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.brand{position:absolute;left:16px;top:16px;padding:8px 10px;border-radius:12px;background:rgba(0,0,0,.45);backdrop-filter:saturate(1.8) blur(4px);font-weight:600}

/* 暂停时居中的播放图标 */
.tap-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:80px;height:80px;border:none;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px);cursor:pointer}
.tap-play.show{display:flex}
.tap-play svg{margin-left:4px}

.cta-btn{position:fixed;left:24px;right:24px;transform:none;
  top:auto;
  bottom:16px !important; /* fallback for browsers not supporting env() */
  bottom:calc(16px + env(safe-area-inset-bottom)) !important;
  width:auto;max-width:560px;margin:0 auto;
  height:3.325rem;border:none;border-radius:2.5rem;background:linear-gradient(to right, orange, #ff4500);color:#fff;font-size:1.125rem;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:4; /* 高于视频与静音按钮 */
  box-shadow:0 8px 16px rgba(255,69,0,.35)}
.cta-btn:active{transform:scale(.98)}

@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-6px)}}

/* 结束遮罩 */
.overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column; text-align:center;}
.overlay.show{display:flex}
.overlay::before{content:"";position:absolute;inset:0;background:#000;opacity:.55}
.overlay::after{content:"";position:absolute;inset:0;background-position:center;background-size:cover;filter:blur(6px);z-index:-1}

.replay{position:absolute;right:16px;top:16px;width:40px;height:40px;border:none;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:20px;cursor:pointer}
.center{z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 24px}
.logo{width:64px;height:64px}
.title{font-size:22px;font-weight:700}
.subtitle{opacity:.9}
.down-arrow{margin-top:8px;font-size:24px;opacity:.8;cursor:pointer}

.bottom-btn{position:absolute;left:24px;right:24px;transform:none;
  top:auto;
  bottom:24px !important; /* fallback */
  bottom:calc(24px + env(safe-area-inset-bottom)) !important;
  width:auto;max-width:560px;margin:0 auto;
  height:3.325rem;border:none;border-radius:2.5rem;background:linear-gradient(to right, orange, #ff4500);color:#fff;font-size:1.125rem;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:2;
  box-shadow:0 8px 16px rgba(255,69,0,.35)}

/* 结束遮罩出现时，隐藏底部固定按钮，避免同时显示两个按钮 */
.overlay-open .cta-btn{display:none}

/* 手势图片：悬浮在按钮右下角，做放大缩小动效 */
.btn-hand{position:absolute;right:-10px;bottom:-6px;width:56px;height:auto;pointer-events:none;z-index:3;
  transform-origin:90% 86%;
  transform:rotate(-18deg) scale(1);filter:drop-shadow(0 4px 8px rgba(0,0,0,.35));
  animation:handPulse 1.6s ease-in-out infinite}
@keyframes handPulse{
  0%,100%{transform:rotate(-18deg) scale(1)}
  50%{transform:rotate(-18deg) scale(1.18)}
}
.cta-btn:active .btn-hand,.bottom-btn:active .btn-hand{transform:rotate(-18deg) scale(.96)}

/* 响应式：平板宽屏时适度放大按钮 */
@media (min-width:768px){
  .cta-btn,.bottom-btn{font-size:1.25rem;height:3.5rem}
}

/* 静音按钮：右上角 */
.mute-btn{position:absolute;right:16px;top:16px;width:40px;height:40px;border:none;border-radius:50%;
  background:rgba(0,0,0,.45);color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  backdrop-filter:saturate(1.8) blur(4px);z-index:5}
.mute-btn:active{transform:scale(.98)}

/* 受限平台：轻触开启声音 引导（手+文案） */
.sound-hand{position:absolute;right:10px;top:8px;width:64px;height:auto;pointer-events:none;z-index:6;
  transform-origin:90% 10%;
  transform:rotate(-28deg) scale(1);filter:drop-shadow(0 4px 8px rgba(0,0,0,.35));
  animation:handPulse 1.6s ease-in-out infinite;display:none}
.sound-hint{position:absolute;right:88px;top:18px;padding:6px 10px;border-radius:14px;background:rgba(0,0,0,.42);backdrop-filter:saturate(1.8) blur(4px);
  color:#fff;font-size:12px;line-height:1;z-index:6;display:none;pointer-events:none}