/* =====================================================
   脆卜寶 CBB — 🧊 360° 睇 3D ＋ 📱 AR（js/viewer3d.js）
   ===================================================== */

/* 詳情視窗相入面嘅「🧊 360° 睇 3D」掣（疊喺相左上角，唔會推郁其他嘢） */
.cm-3d {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: .3em;
  padding: .38em .9em; border-radius: 999px;
  border: 3px solid var(--brown, #4a2414); background: linear-gradient(180deg, #e2343c, var(--red, #c4232b));
  color: #fff; font: inherit; font-weight: 900; font-size: .9rem; line-height: 1.2;
  box-shadow: 0 3px 0 var(--brown, #4a2414); cursor: pointer; white-space: nowrap;
  transition: transform .12s, box-shadow .12s, filter .2s;
}
.cm-3d:hover { filter: brightness(1.06); transform: translateY(-1px); }
.cm-3d:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--brown, #4a2414); }
.cm-3d:focus-visible { outline: 3px solid var(--gold, #f6b830); outline-offset: 2px; }

/* 全畫面 3D 視窗（蓋過詳情視窗；關咗就返返去） */
.v3d {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; padding: .75rem;
  background: rgba(42, 18, 9, .62);
  overscroll-behavior: contain; animation: fade .2s;
}
.v3d-box {
  display: flex; flex-direction: column; gap: .45rem;
  width: min(560px, 100%); height: min(720px, 100%);
  background: var(--cream, #fff4dc); color: var(--brown, #4a2414);
  border: 4px solid var(--brown, #4a2414); border-radius: 26px; padding: .9rem;
  box-shadow: 0 0 0 6px var(--red, #c4232b), 0 0 0 9px var(--brown, #4a2414);
  text-align: center; box-sizing: border-box;
}
.v3d-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.v3d-title { margin: 0; font-size: 1.25rem; font-weight: 900; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3d-close {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid var(--brown, #4a2414); background: #fff; color: var(--brown, #4a2414);
  font-weight: 900; font-size: 1rem; cursor: pointer; box-shadow: 0 3px 0 var(--brown, #4a2414);
}
.v3d-close:focus-visible { outline: 3px solid var(--gold, #f6b830); outline-offset: 2px; }

.v3d-stage {
  position: relative; flex: 1 1 auto; min-height: 0;
  border: 3px solid var(--brown, #4a2414); border-radius: 20px; overflow: hidden;
  background: radial-gradient(circle at 50% 38%, #fffdf6 0%, var(--cream, #fff4dc) 55%, var(--paper, #fbe9c4) 100%);
  touch-action: none;
}
.v3d-mv, .v3d-canvas {
  display: block; width: 100%; height: 100%;
  background: transparent; --poster-color: transparent;
  outline: none; touch-action: none; cursor: grab;
}
.v3d-canvas:active { cursor: grabbing; }
.v3d-status {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 1;
  max-width: 86%; padding: .45em 1em; border-radius: 999px;
  background: rgba(255, 255, 255, .9); border: 2px solid var(--brown, #4a2414);
  font-weight: 700; font-size: .92rem; pointer-events: none;
}
.v3d-status[hidden] { display: none; }

/* model-viewer 嘅 AR 掣（部機唔支援 AR 時 model-viewer 自己會收埋） */
.v3d-ar {
  position: absolute; left: 50%; bottom: 14px; translate: -50% 0;
  padding: .55em 1.2em; border-radius: 999px;
  border: 3px solid var(--brown, #4a2414); background: linear-gradient(180deg, #e2343c, var(--red, #c4232b));
  color: #fff; font: inherit; font-weight: 900; font-size: 1rem; white-space: nowrap;
  box-shadow: 0 4px 0 var(--brown, #4a2414); cursor: pointer;
}
.v3d-ar:active { translate: -50% 3px; box-shadow: 0 1px 0 var(--brown, #4a2414); }

.v3d-hint, .v3d-size, .v3d-arnote { margin: 0; font-size: .88rem; line-height: 1.45; }
.v3d-hint { font-weight: 700; }
.v3d-size { display: inline-block; align-self: center; background: #fff; border: 2px solid var(--brown, #4a2414); border-radius: 999px; padding: .15em .9em; font-weight: 700; }
.v3d-arnote { font-size: .8rem; opacity: .85; }
.v3d-arnote[hidden] { display: none; }

@media (max-width: 480px) {
  .v3d { padding: .4rem; }
  .v3d-box { padding: .65rem; border-radius: 20px; box-shadow: 0 0 0 4px var(--red, #c4232b), 0 0 0 6px var(--brown, #4a2414); }
  .v3d-title { font-size: 1.1rem; }
  .cm-3d { font-size: .82rem; }
}
@supports (height: 100dvh) {
  .v3d-box { height: min(720px, calc(100dvh - 1.5rem)); }
  @media (max-width: 480px) { .v3d-box { height: calc(100dvh - .8rem); } }
}
@media (prefers-reduced-motion: reduce) {
  .v3d { animation: none; }
  .cm-3d, .v3d-ar { transition: none; }
}