/* ============================================================
   3D 页专属：展台
   —— 背景压到接近纯黑，光只从下方来一点点，其余交给模型自己
   2026-10-15：删掉四角取景框角标（极简的第一步是删元素，不是把元素调淡），
   两盏灯收成一盏：只留地面上的一层反光（原来还有一片顶光）。
   反光的颜色由暖白回金 —— 模型自己是黄的，托着它的光也该是黄的，
   否则它站在一个不属于它的空间里（纯中性背景上，模型像"挂"上去的）。
   ============================================================ */
.s3-head h1{ font-size:var(--fs-2xl); letter-spacing:0; margin:0; }

/* ---------- 舞台 ---------- */
.stage{
  position:relative; margin-top:clamp(32px,4.4vw,60px);
  height:clamp(430px,60vh,660px);
  border-radius:var(--r-lg); overflow:hidden;
  /* docs/23 §3.6：3D 展台是三处深色之一。令牌翻亮后 --bg-2 已是奶油，
     这里显式墨底；地面留一抹极淡暖光 —— 模型自己是黄的，托着它的光也该是黄的。 */
  background:
    radial-gradient(ellipse 62% 48% at 50% 86%, rgba(255,205,80,.075), transparent 72%),
    var(--ink);
  cursor:grab;
  /* 展台本身允许双向手势；画布仍只吃纵向滚动，横向拖拽留给 3D 旋转。
     底部 HUD 在窄屏是一条横向滑轨，需要 pan-x 才能滑动。 */
  touch-action:manipulation;
}
.stage:active{ cursor:grabbing; }
.stage canvas{
  display:block; width:100%; height:100%; touch-action:pan-y;
  user-select:none; -webkit-user-select:none;
}
.stage canvas:focus{ outline:none; }
/* canvas 焦点框走全局 :focus-visible（深粉）；反转偏移让框画在画布内 */
.stage canvas:focus-visible{ outline-offset:-4px; }

/* 按钮浮在展台下沿。操作提示放到展台外面 —— 挤在一起会挡住奶蛙的脚。 */
.hud{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap;
  padding:18px clamp(14px,2.4vw,26px) 16px;
  background:linear-gradient(0deg, rgba(26,23,18,.92), rgba(26,23,18,.5) 58%, transparent);
  pointer-events:none;
}
.hud > *{ pointer-events:auto; }
.hud-group{ display:flex; gap:6px; flex-wrap:wrap; }
/* HUD 按钮：孟菲斯胶囊描边（spec 页口径）—— 奶油描边 + 透明底 + 奶油字，
   hover 底色互换为纸白底墨字。墨展台上不用玻璃拟态。 */
.hud-btn{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.55em 1.05em; min-height:40px;
  background:transparent; border:2px solid var(--cream);
  color:var(--cream); border-radius:var(--r-pill);
  font-size:var(--fs-sm); font-weight:700; cursor:pointer;
  transition:background var(--dur-ui) var(--ease-soft), color var(--dur-ui) var(--ease-soft);
}
.hud-btn:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.hud-btn .ic{ width:14px; height:14px; }
.hud-btn .ic-play{ display:none; }
.hud-btn.is-paused .ic-play{ display:block; }
.hud-btn.is-paused .ic-pause{ display:none; }

.stage-hint{
  margin:var(--sp-3) 0 0; font-family:var(--mono); font-size:var(--fs-xs);
  color:var(--text-2);
}
.stage-hint b{ color:var(--ink); font-weight:700; }
/* 提示按输入方式给：触摸屏没有滚轮和方向键，别写上去 */
.stage-hint .coarse{ display:none; }
@media (hover:none),(pointer:coarse){
  .stage-hint .fine{ display:none; }
  .stage-hint .coarse{ display:inline; }
}

/* 载入态 / 降级态 */
.stage-note{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:1em; text-align:center; padding:2em;
  background:var(--ink); transition:opacity .4s;
}
.stage-note.is-gone{ opacity:0; pointer-events:none; }
.stage-note img{ height:clamp(170px,32vh,290px); width:auto; max-width:66%; }
.stage-note p{ margin:0; color:rgba(255,246,224,.72); font-size:var(--fs-sm); line-height:1.9; max-width:30em; }

/* ---------- 规格表 ----------
   原先靠「1px 缝隙铺底色」画格子线。改为纯留白分栏：列靠对齐，不靠线。 */
.spec{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--sp-5) var(--sp-7);
  margin-top:clamp(32px,4vw,52px);
}
.spec div{ padding:0; }
.spec dt{
  font-size:var(--fs-xs); color:var(--text-2);
  margin:0 0 var(--sp-2);
}
.spec dd{ margin:0; font-size:var(--fs-lg); color:var(--ink); letter-spacing:0; }
.spec dd small{ display:block; color:var(--text-2); font-size:var(--fs-sm); letter-spacing:0; margin-top:.3em; line-height:1.7; }

@media (max-width:980px){
  /* 窄屏 HUD 压成一条横向滑轨：
     原来换行 3–4 行，320px 下占 214/374px（57%），把蛙腹和腿全盖住。
     现在只占展台下沿一条，右侧留 30px 尾距，滚到底时最后一颗不会被渐隐切掉。 */
  .hud{
    flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    padding:10px 30px 10px 12px; gap:6px;
    scroll-padding-right:30px; scrollbar-width:none;
    -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
    pointer-events:auto; touch-action:pan-x pan-y;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent 100%);
  }
  .hud::-webkit-scrollbar{ display:none; }
  .hud-group{ flex:0 0 auto; flex-wrap:nowrap; }
  .hud > .hud-btn{ flex:0 0 auto; }
  /* 滑轨第一屏先给「跳一下 / 暂停」，动作组往右滑；桌面端顺序不变。 */
  #jumpBtn, #playBtn{ order:-1; }
}
@media (max-width:640px){
  .stage{ height:clamp(360px,52vh,460px); }
  /* 触控目标不跟着缩：手指比鼠标粗，42px 是这排按钮的下限 */
  .hud-btn{ font-size:var(--fs-xs); padding:.5em .78em; min-height:42px; letter-spacing:0; white-space:nowrap; }
}