/* Base Reset & Layout */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #0f0f23;
  color: #fff;
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  position: fixed;
  inset: 0;
  user-select: none;
  -webkit-user-select: none;
  /* V12.4: 全局禁用浏览器触摸手势——双指捏合全屏都交给自定义摄像头变焦，
     页面永不随捏合缩放（真机反馈：仅顶部区域能捏合且缩的是网页） */
  touch-action: none;
  overscroll-behavior: none;
}

#gameScreen {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
}

.game-area {
  flex: 1;
  position: relative;
  overflow: hidden;
  /* V12.3.1/V12.4: 禁用浏览器默认触摸手势（body 已全局禁用，此处保留双保险） */
  touch-action: none;
  background: #000;
}

#videoElement {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#videoCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* V12.4: 与 video 相同的 cover 适配，保证 displayScale/offset 映射体系不变；
     缓冲区尺寸 = video 原生尺寸，仅绘制内容随变焦变化 */
  object-fit: cover;
  pointer-events: none;
  z-index: 5;
}

#overlayCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

#threeCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

/* Responsive */
@media (min-width: 1024px) {
  .collection-slot { max-width: 52px; font-size: 22px; }
  .collection-bar { gap: 12px; height: 72px; }
  .title-bar { height: 56px; padding: 8px 24px; }
}

@media (max-width: 480px) {
  .collection-slot { max-width: 40px; font-size: 16px; }
  .collection-bar { gap: 6px; padding: 6px 12px; height: 56px; }
}

@media (max-width: 380px) {
  .title-bar .tracking-status span { display: none; }
  .tracking-status { margin-right: 0; }
  .title-bar .actions button { padding: 6px 10px; font-size: 12px; }
  .collection-slot { max-width: 36px; font-size: 14px; }
  .collection-label { font-size: 12px; }
}

/* Short / landscape screens: keep game area dominant */
@media (max-height: 480px) {
  .title-bar { height: 40px; min-height: calc(40px + env(safe-area-inset-top)); padding-top: max(4px, env(safe-area-inset-top)); }
  .collection-bar { height: 48px; min-height: calc(48px + env(safe-area-inset-top)); padding-top: max(4px, env(safe-area-inset-top)); gap: 5px; }
  .collection-slot { max-width: 34px; font-size: 13px; }
  .status-bar { height: 30px; min-height: calc(30px + env(safe-area-inset-bottom)); padding-bottom: max(4px, env(safe-area-inset-bottom)); }
}