* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
}

body {
  background: #fff;
  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", sans-serif;
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
  /* 禁止双指/双击缩放 */
  touch-action: pan-y;
  -webkit-text-size-adjust: 100%;
}

/* ——— 整体页面布局 ——— */
.page {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  height: 100vh;
  background: #fff;
  position: relative;
}

/* ——— 视频区域，撑满剩余高度 ——— */
.video-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff;
}

/* 包裹层：relative 定位，用于放透明遮罩 */
.video-wrap {
  position: relative;
  width: 100%;
  line-height: 0;
  font-size: 0;
  overflow: hidden;
}

#laughVideo {
  width: 100%;
  height: auto;
  display: block;
  outline: none;
  border: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* 完全隐藏所有原生控件及浏览器注入的悬浮按钮 */
#laughVideo::-webkit-media-controls                          { display: none !important; }
#laughVideo::-webkit-media-controls-enclosure               { display: none !important; }
#laughVideo::-webkit-media-controls-panel                   { display: none !important; }
#laughVideo::-webkit-media-controls-overlay-cast-button     { display: none !important; }
#laughVideo::-webkit-media-controls-overlay-play-button     { display: none !important; }
#laughVideo::-internal-media-controls-button-panel          { display: none !important; }
#laughVideo::-internal-media-controls-overflow-button       { display: none !important; }
#laughVideo::-webkit-media-controls-start-playback-button   { display: none !important; }

/* 透明遮罩：绝对覆盖整个视频，让浏览器无法在视频上渲染任何悬浮 UI */
.video-shield {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: transparent;
  pointer-events: none;
}

/* ——— 加载占位层 ——— */
.video-placeholder {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease;
}

.video-placeholder.hidden {
  opacity: 0;
  pointer-events: none;
}

/* 加载圆圈动画 */
.loader-ring {
  width: 48px;
  height: 48px;
  border: 4px solid #e0e0e0;
  border-top-color: #1a1a1a;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ——— 底部控制栏 ——— */
.controls {
  height: 90px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 14px;
  background: #fff;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* 按钮组：整体向右偏移 */
.btn-group {
  display: flex;
  align-items: center;
  gap: 14px;
  transform: translateX(18px);
}

/* ——— 循环大笑按钮 ——— */
.laugh-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  background: #1a1a1a;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 1.5px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}

/* ——— 更多按钮（圆形 + 抖动） ——— */
.more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  background: #1a1a1a;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  animation: more-wiggle 2.4s ease-in-out infinite;
}

/* 抖动动画：轻微左右摇摆 + 缩放呼吸感 */
@keyframes more-wiggle {
  0%, 100%  { transform: rotate(0deg)   scale(1);    }
  10%       { transform: rotate(-6deg)  scale(1.05); }
  20%       { transform: rotate(6deg)   scale(1.05); }
  30%       { transform: rotate(-4deg)  scale(1);    }
  40%       { transform: rotate(4deg)   scale(1);    }
  50%       { transform: rotate(0deg)   scale(1);    }
}

.more-btn:hover {
  background: #333;
  animation: none;
  transform: scale(1.06);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.more-btn:active {
  transform: scale(0.94);
  animation: none;
}

.laugh-btn:hover {
  background: #333;
  transform: scale(1.04);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}

.laugh-btn:active {
  transform: scale(0.96);
}

.laugh-btn.playing {
  background: #e03030;
  box-shadow: 0 4px 18px rgba(224, 48, 48, 0.4);
}

.laugh-btn.playing:hover {
  background: #c82020;
  box-shadow: 0 6px 24px rgba(224, 48, 48, 0.55);
}

/* ——— 按钮图标 ——— */
.btn-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* 更多按钮图标小一号 */
.more-btn .btn-icon {
  width: 14px;
  height: 14px;
}

.hidden {
  display: none !important;
}

/* 播放时循环图标旋转动效 */
.laugh-btn.playing .loop-icon {
  animation: spin-loop 1.6s linear infinite;
}

@keyframes spin-loop {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}