/* 1. 消除全域點擊高亮 (解決點按螢幕閃爍) */
* {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #000;
  /* 移除點擊高亮，消除點擊閃爍 */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  /* 優化觸摸響應 */
  touch-action: manipulation;
}

#canvas, 
#capture-canvas {
  position: fixed;
  inset: 0; /* 替代 top:0, left:0 以確保絕對對齊 */
  width: 100vw;
  height: 100vh;
  object-fit: cover; /* 關鍵：確保不同比例的鏡頭畫面都能填滿螢幕而不變形 */
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  background: #000;
    /* 優化圖像渲染品質 - 啟用抗鋸齒和圖像平滑 */
    image-rendering: auto; /* 使用瀏覽器自動抗鋸齒，確保邊緣平滑 */
    /* 如果在 iOS 上鋸齒嚴重，可以嘗試強制平滑 */
    image-rendering: -webkit-optimize-speed; /* WebKit 優化速度渲染，減少鋸齒感（替代 optimize-contrast） */
  /* 字體平滑優化 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Canvas 抗鋸齒優化 */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0); /* 啟用硬體加速，可能有助於抗鋸齒 */
  /* 優化渲染性能 */
  will-change: transform, opacity, filter;
  /* 移除 touch-action: none，允許點擊事件正常傳遞給 AR 系統 */
  -webkit-tap-highlight-color: transparent;
  /* 強制鎖定對齊基準 */
  object-position: center center;
  /* 鏡頭切換模糊過渡的初始狀態 */
  /* 注意：filter 已移除，改為在 Canvas 層面應用，確保預覽、拍攝、錄製一致 */
  filter: blur(0px);
  /* 對比度和亮度增強現在在 Canvas 2D Context 層面處理（見 imageProcessor.js） */
}

/* Overlay canvas 用於顯示 filter 效果（對比度和亮度增強） */
#canvas-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 2; /* 在源 canvas 之上 */
  opacity: 0;
  visibility: hidden;
  background: transparent;
  pointer-events: none; /* 不阻擋點擊事件，讓 AR 系統可以正常接收 */
  /* 優化圖像渲染品質 */
  image-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform, opacity;
}

#capture-canvas {
  z-index: 0;
}

/* 左上角返回按钮 (X) - 确保在满版预览上方 */
#back-button-container {
  position: fixed;
  top: 3%;
  left: 4%;
  z-index: 101; /* 確保在最上層，高於預覽容器 */
  pointer-events: auto;
}

#back-button {
  width: 60px;
  height: 60px;
  background-image: url(/assets/BackButton.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  outline: none;
}

#back-button:active {
  opacity: 0.7;
}

/* 右上角切换镜头按钮 */
#switch-cam {
  position: fixed;
  top: calc(3% + 1px);
  right: 5%;
  z-index: 1001;
  pointer-events: auto;
  display: none;
}

#switch-button {
  height: 65px;
  width: 65px;
  background-image: url(/assets/SwitchButton.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  border: none;
  user-select: none;
  outline: none;
  transition: transform 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  cursor: pointer;
}

#switch-button:active {
  transform: scale(0.9);
}

/* 右上角回拨按钮（预览时显示） */
#replay-button-container {
  position: fixed;
  top: calc(3% + 3px);
  right: 5%;
  z-index: 1001;
  pointer-events: auto;
  display: none;
}

#replay-button {
  height: 65px;
  width: 65px;
  background-image: url(/assets/ReplayButton.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  border: none;
  user-select: none;
  outline: none;
  transition: transform 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  cursor: pointer;
}

#replay-button:active {
  transform: scale(0.9);
}

/* 桌面版回拨按钮 */
.desktop #replay-button-container {
  top: calc(5% + 3px);
  right: 5%;
}

.desktop #replay-button {
  height: 55px;
  width: 55px;
}

/* 录制按钮容器 */
#controls {
  position: fixed;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  display: none;
  justify-content: center;
  align-items: center;
}

#record-button-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 266px;
  height: 266px;
}

/* 进度指示器环 - 录制时显示在外围，在灰色大圆的外侧边缘 */
/* 按钮180px(包括3px border) scale(1.4) = 252px（灰色大圆直径） */
/* 进度环需要更大，不压到中间的recording button图 */
/* 进度环内径 = 252px + 6px间距 = 258px，加上3px border，总直径 = 264px */
/* 初始尺寸：264px / 1.4 = 188.6px，取190px */
#record-progress-ring {
  position: absolute;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  border: 3px solid transparent;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  box-sizing: border-box;
}

#record-progress-ring.recording {
  opacity: 1;
  animation: progressRingRotate 2s linear infinite;
  /* 基础环是透明的，只显示旋转的弧线 */
  border: 3px solid transparent;
}

#record-progress-ring.recording::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  border-radius: 50%;
  /* 使用conic-gradient创建渐变效果，让整圈进度条有明显的方向感，旋转时能看出转动 */
  background: conic-gradient(
    from 0deg at 50% 50%,
    rgba(255, 255, 255, 0.3) 0deg,
    rgba(255, 255, 255, 0.3) 180deg,
    rgba(255, 255, 255, 1) 180deg,
    rgba(255, 255, 255, 1) 360deg
  );
  /* 使用mask创建环形效果，只显示边缘的3px，形成整圈的进度条 */
  mask: radial-gradient(
    circle at center,
    transparent calc(50% - 1.5px),
    black calc(50% - 1.5px),
    black calc(50% + 1.5px),
    transparent calc(50% + 1.5px)
  );
  -webkit-mask: radial-gradient(
    circle at center,
    transparent calc(50% - 1.5px),
    black calc(50% - 1.5px),
    black calc(50% + 1.5px),
    transparent calc(50% + 1.5px)
  );
}

@keyframes progressRingRotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg) scale(1.4);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg) scale(1.4);
  }
}

/* 录制按钮 */
#record-button {
  position: absolute;
  width: 180px;
  height: 180px;
  background: transparent;
  border: 3px solid #FFF;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  z-index: 999;
  transition: all 0.3s ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  outline: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}

/* 录制按钮内部 - 使用RecordButton.png */
#record-button-inner {
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  margin: 3px;
  background-image: url(/assets/RecordButton.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
  transition: all 0.3s ease;
}

/* 录制中状态 - 按钮放大，添加透明灰阶大圆背景，隐藏outline */
#record-button.recording {
  transform: translate(-50%, -50%) scale(1.4);
  background: rgba(128, 128, 128, 0.3);
  backdrop-filter: blur(10px);
  border: none;
  /* 确保按钮的灰色背景圆正好是180px * 1.4 = 252px */
  width: 180px;
  height: 180px;
}

/* 录制中状态 - 保持recording button的图，不变成红色方块，但尺寸变小 */
#record-button.recording #record-button-inner {
  width: 70%;
  height: 70%;
  border-radius: 50%;
  background-image: url(/assets/RecordStop.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 15%;
}

/* 拍照状态 */
#record-button.capturing #record-button-inner {
  transform: scale(0.8);
}

/* 录制时间显示 - 长形，等比例放大，上下左右间距一致，与按钮水平对齐 */
#recording-timer {
  position: fixed;
  top: 3%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1001;
  background: #000;
  padding: 16px 32px;
  border-radius: 50px;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  box-sizing: border-box;
}

#timer-text {
  color: #FFF;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 3px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}

/* 修正背景閃爍的關鍵 CSS */
#preview-container {
  background-color: #000 !important; /* 讓底下的 AR Canvas 墊底，直到影片載入完成 */
  position: fixed;
  inset: 0;
  z-index: 99;
  display: none; /* 初始隱藏 */
}

#preview-video,
#preview-image {
  background-color: #000 !important; /* 確保內容填滿且背景不閃白 */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center; /* 與 Canvas 保持絕對一致的對齊 */
}

/* 當影片真正開始播放後，我們才把底下的 Canvas 關掉，這能無縫銜接 */
.now-review #canvas, 
.now-review #capture-canvas {
  display: none !important; /* 使用 display:none 徹底隱藏，防止透出 */
}

/* 隱藏視頻控制條 - 極致封殺方案 */
#preview-video {
  /* 防止長按出現系統選單 */
  -webkit-touch-callout: none !important;
  /* 確保沒有預設的播放圖示 */
  background-image: none !important;
  /* 防止點擊觸發控制條 */
  pointer-events: none !important;
  /* 隱藏所有可能的控制元素 */
  -webkit-appearance: none !important;
  appearance: none !important;
  /* 確保沒有任何控制UI顯示 */
  -webkit-media-controls: none !important;
  /* 防止iOS Safari顯示控制條 */
  -webkit-playsinline: true !important;
  playsinline: true !important;
  /* 優化視頻縮放渲染質量，減少像素鋸齒 */
  image-rendering: auto !important; /* 標準屬性，所有瀏覽器默認平滑算法 */
  /* 如果在 iOS 上鋸齒嚴重，可以嘗試強制平滑 */
  image-rendering: -webkit-optimize-speed !important; /* WebKit 優化速度渲染，減少鋸齒感（替代 optimize-contrast） */
  /* 硬件加速優化，提升渲染質量 */
  transform: translateZ(0) !important; /* 啟用硬件加速 */
  will-change: transform !important; /* 提示瀏覽器優化 */
  backface-visibility: hidden !important; /* 優化 3D 渲染 */
  -webkit-backface-visibility: hidden !important;
  /* 優化圖像渲染 */
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* 隱藏所有 WebKit 媒體控制元素 */
#preview-video::-webkit-media-controls {
  display: none !important;
  -webkit-appearance: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

#preview-video::-webkit-media-controls-enclosure {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
}

#preview-video::-webkit-media-controls-panel {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

#preview-video::-webkit-media-controls-play-button {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  -webkit-appearance: none !important;
}

#preview-video::-webkit-media-controls-start-playback-button {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  -webkit-appearance: none !important;
}

#preview-video::-internal-media-controls-download-button {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

#preview-video::-webkit-media-controls-timeline {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

#preview-video::-webkit-media-controls-current-time-display {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

#preview-video::-webkit-media-controls-time-remaining-display {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

#preview-video::-webkit-media-controls-mute-button {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

#preview-video::-webkit-media-controls-volume-slider {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

#preview-video::-webkit-media-controls-fullscreen-button {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* 針對 iOS Safari 的特殊覆蓋 - 隱藏所有可能的UI元素 */
#preview-video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  -webkit-appearance: none !important;
}

/* 確保視頻元素本身不顯示任何控制UI */
#preview-video[controls] {
  /* 即使有 controls 屬性也強制隱藏 */
}

#preview-video:not([controls]) {
  /* 確保沒有 controls 時也不顯示任何UI */
}

/* 額外保障：使用 .no-controls 類強制隱藏控制條 */
#preview-video.no-controls,
#preview-video.no-controls::-webkit-media-controls,
#preview-video.no-controls::-webkit-media-controls-enclosure,
#preview-video.no-controls::-webkit-media-controls-panel {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  -webkit-appearance: none !important;
  pointer-events: none !important;
}

/* 桌面版预览 - 满版显示，无需特殊调整 */

/* 预览时的操作按钮 - 确保在最上層且無遮擋 */
#action-buttons {
  position: absolute;
  bottom: 90px;
  left: 0;
  width: 100%;
  z-index: 100; /* 必須高於 preview-container */
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none; /* 讓容器本身不擋住下層，但按鈕要能點擊 */
}

#share-download-button {
  background: #FFF;
  border: none;
  color: #000;
  border-radius: 70px; /* 更圆润：从50px增加到70px */
  padding: 41px 75px; /* 统一高度：以拍照预览页为准 */
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.3s ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  outline: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  white-space: nowrap;
  /* 确保高度固定，不受内容影响 */
  height: auto;
  min-height: 103px; /* padding: 41px * 2 + 字体行高，确保高度一致 */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto; /* 恢復按鈕的點擊功能 */
}

#share-download-button:hover {
  background: rgba(255, 255, 255, 0.8);
}

#share-download-button:active {
  background: rgba(255, 255, 255, 0.6);
}


/* 录制时的loading（保留原有功能） */
#loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(5px);
}

#loading-icon {
  height: 100px;
  width: 100px;
  animation: spin 2s linear infinite;
}

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

/* Desktop-specific styles */
.desktop #record-button-wrapper {
  width: 190px;
  height: 190px;
}

.desktop #record-button {
  width: 140px;
  height: 140px;
  border-width: 2px;
}

.desktop #record-button-inner {
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  margin: 2px;
}

/* 桌面：按钮140px(包括2px border) scale(1.3) = 182px（灰色大圆直径） */
/* 进度环需要更大，内径 = 182px + 4px间距 = 186px，加上2px border，总直径 = 190px */
/* 初始尺寸：190px / 1.3 = 146px */
.desktop #record-progress-ring {
  width: 146px;
  height: 146px;
  border-width: 2px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
}

.desktop #record-progress-ring.recording {
  animation: progressRingRotateDesktop 2s linear infinite;
}

/* 桌面版进度条的mask需要调整为2px（对应border-width: 2px） */
.desktop #record-progress-ring.recording::before {
  top: -2px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  /* 使用mask创建环形效果，只显示边缘的2px（对应桌面版的border宽度） */
  mask: radial-gradient(
    circle at center,
    transparent calc(50% - 1px),
    black calc(50% - 1px),
    black calc(50% + 1px),
    transparent calc(50% + 1px)
  );
  -webkit-mask: radial-gradient(
    circle at center,
    transparent calc(50% - 1px),
    black calc(50% - 1px),
    black calc(50% + 1px),
    transparent calc(50% + 1px)
  );
}

@keyframes progressRingRotateDesktop {
  from {
    transform: translate(-50%, -50%) rotate(0deg) scale(1.3);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg) scale(1.3);
  }
}

.desktop #record-button.recording {
  transform: translate(-50%, -50%) scale(1.3);
  border: none;
}

.desktop #record-button.recording #record-button-inner {
  width: 70%;
  height: 70%;
  margin: 15%;
}

/* 桌面版切换镜头按钮显示和位置 */
.desktop #switch-cam {
  display: block;
  top: calc(5% + 1px);
  right: 5%;
}

.desktop #switch-button {
  height: 55px;
  width: 55px;
}

/* 桌面版按钮位置下移，间距与切换镜头按钮一致 */
.desktop #back-button-container {
  top: 5%;
  left: 4%;
}

.desktop #back-button {
  width: 50px;
  height: 50px;
}

/* 桌面版时间显示对齐 - 等比缩小 */
.desktop #recording-timer {
  top: 3%;
  padding: 12px 24px;
  min-height: 45px;
  transform: translateX(-50%) scale(0.75);
}

.desktop #timer-text {
  font-size: 24px;
  letter-spacing: 2.25px;
}

/* 桌面版录制按钮适配 - 横式格式 */
.desktop #record-button-wrapper {
  width: 226px;
  height: 226px;
}

.desktop #record-button {
  width: 160px;
  height: 160px;
  border-width: 2.5px;
}

.desktop #record-button-inner {
  width: calc(100% - 5px);
  height: calc(100% - 5px);
  margin: 2.5px;
}

/* 桌面版：按钮160px(包括2.5px border) scale(1.35) = 216px（灰色大圆直径） */
/* 进度环需要更大，内径 = 216px + 5px间距 = 221px，加上2.5px border，总直径 = 226px */
/* 初始尺寸：226px / 1.35 = 167.4px ≈ 168px */
.desktop #record-progress-ring {
  width: 168px;
  height: 168px;
  border-width: 2.5px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
}

.desktop #record-progress-ring.recording {
  animation: progressRingRotateDesktopLandscape 2s linear infinite;
}

@keyframes progressRingRotateDesktopLandscape {
  from {
    transform: translate(-50%, -50%) rotate(0deg) scale(1.35);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg) scale(1.35);
  }
}

.desktop #record-button.recording {
  transform: translate(-50%, -50%) scale(1.35);
  border: none;
}

.desktop #record-button.recording #record-button-inner {
  width: 70%;
  height: 70%;
  margin: 15%;
}

/* 桌面版按钮样式 */
.desktop #action-buttons {
  bottom: 90px; /* 與移動端一致，上移 10px */
}

.desktop #share-download-button {
  padding: 27px 50px; /* 统一高度：以拍照预览页为准 */
  font-size: 16px;
  letter-spacing: 1.5px;
  border-radius: 60px; /* 桌面版更圆润 */
  min-height: 70px; /* 确保高度一致 */
}

/* 横屏提示页面优化 - 统一尺寸与置中 */
#rotate-device-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  /* 使用 100dvh 处理移动浏览器工具栏问题（Safari、Line等），fallback 到 100vh */
  height: 100vh;
  height: 100dvh;
  background-color: #000;
  z-index: 10000; /* 最高层级，确保能盖过预览影片和所有 UI 元素 */
  display: none;
  /* 针对 Line 浏览器：确保容器本身没有偏移 */
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  /* 确保容器在 Line 浏览器中完全占满视口 */
  overflow: hidden;
}

#rotate-device-icon {
  /* 位置由 JavaScript 动态计算，确保在所有浏览器中都能精确居中 */
  position: absolute;
  /* 参考页面比例：使用响应式尺寸 */
  width: 60%;
  max-width: 400px;
  height: auto;
  max-height: 60vh;
  object-fit: contain;
  /* 取消旋转动画 */
  /* 确保在所有浏览器中都能正确显示 */
  margin: 0;
  padding: 0;
  /* 确保图片不会因为浏览器默认样式而偏移 */
  display: block;
  /* 强制重置可能影响位置的属性 */
  float: none;
  vertical-align: middle;
  /* 针对 Line 浏览器：确保没有额外的偏移 */
  box-sizing: border-box;
}

/* 启动画面 */
#start-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 3000;
  gap: 60px;
}

#hint-icon {
  width: auto;
  height: auto;
  max-width: 80%;
  max-height: 50vh;
  object-fit: contain;
}

#ar-start-button {
  border-radius: 100px;
  padding: 28px 70px;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.3s ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  outline: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  white-space: nowrap;
  position: relative;
  pointer-events: auto;
  z-index: 1;
  touch-action: manipulation;
  overflow: hidden;
  /* 确保两种状态下的尺寸一致 */
  width: 280px; /* 固定宽度，确保 LOADING... 和 AR START 一样长 */
  min-height: 60px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Loading 状态 - 白线框 + LOADING... 渐变文字 */
#ar-start-button.loading {
  background: transparent;
  border: 3px solid #FFF;
  color: transparent;
  cursor: default;
  pointer-events: none;
  /* 确保与正常状态相同的尺寸 */
  padding: 28px 70px;
}

#ar-start-button.loading .button-text {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0.3) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: loadingTextGradient 2s ease-in-out infinite;
  display: inline-block;
}

@keyframes loadingTextGradient {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* 加载完成后的正常状态 - 白底黑字 */
#ar-start-button:not(.loading) {
  background: linear-gradient(145deg, #ffffff 0%, #f0f0f0 50%, #e0e0e0 100%);
  color: #000;
  border: none;
  box-shadow: 
    0 4px 15px rgba(0, 0, 0, 0.2),
    inset 0 1px 5px rgba(100, 100, 100, 0.2),
    inset 0 -1px 5px rgba(150, 150, 150, 0.15);
  cursor: pointer;
  pointer-events: auto;
  /* 确保与loading状态相同的尺寸 */
  padding: 28px 70px;
}

#ar-start-button:not(.loading) .button-text {
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: #000;
  background-clip: unset;
  animation: none;
  color: #000;
  display: inline-block;
}

/* 手机版：点击时 */
#ar-start-button:active {
  transform: scale(0.95);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.2),
    inset 0 2px 8px rgba(60, 60, 60, 0.3);
}

/* 桌面版：响应悬停和点击 */
@media (hover: hover) and (pointer: fine) {
  #ar-start-button:hover {
    transform: scale(1.05);
    box-shadow: 
      0 6px 20px rgba(0, 0, 0, 0.25),
      inset 0 1px 5px rgba(100, 100, 100, 0.2);
  }
  
  #ar-start-button:active {
    transform: scale(0.95);
    box-shadow: 
      0 2px 8px rgba(0, 0, 0, 0.2),
      inset 0 2px 8px rgba(60, 60, 60, 0.3);
  }
}

/* 桌面版启动画面 */
.desktop #ar-start-button {
  padding: 14px 40px;
  font-size: 20px;
  letter-spacing: 1.5px;
  width: 200px; /* 桌面版固定宽度 */
}

.desktop #ar-start-button.loading .button-text {
  font-size: 20px;
  letter-spacing: 1.5px;
}

.desktop #hint-icon {
  max-width: 60%;
  max-height: 40vh;
}

/* 桌面版启动画面 - 横式格式 */
.desktop #start-screen {
  gap: 40px;
}

/* 桌面端阻擋畫面 */
#desktop-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 32px;
  box-sizing: border-box;
  z-index: 20000;
}

#desktop-overlay-text {
  margin: 0;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.5px;
  line-height: 1.4;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}