/* =========================================================
   JYC 的游戏世界 · 奶酪天平 —— 真实物理天平
   Cheese Scale · physical balance
   ---------------------------------------------------------
   素材：images/scale/parts.png（1024x1024，去背，4 件零件）
   零件坐标（占全图百分比，由视觉核验给出）：
     横梁 beam   x 3.0–53.6   y 21.7–30.4   支点枢轴 (28.3, 26.0)
     立柱 stand  x 63.7–86.3  y  3.0–43.9
     奶酪盘      x 14.2–42.9  y 51.6–93.8   吊环 (28.3, 53.4)
     金币盘      x 59.9–88.7  y 51.6–93.8   吊环 (74.0, 53.4)
   切片方式：background-size / background-position 反算
     size = 100/裁剪宽占比      pos = 起点 / (1 - 裁剪宽占比)
   旋转轴：横梁 transform-origin 落在枢轴，托盘落在吊环
   ========================================================= */

:root { --scale-parts: url(../images/scale/parts.png); }

/* ---------- 舞台 ---------- */
.jyc-scale {
  position: relative;
  width: 100%;
  height: 280px;
  margin: 2px auto 10px;
  max-width: 460px;
  --ang: 0deg;      /* 横梁角度，JS 每帧写入 */
  --sl: 0deg;       /* 左盘相对摆角 */
  --sr: 0deg;       /* 右盘相对摆角 */
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .55));
}

/* 地面接地阴影：让整台秤"落"在场景里，而不是飘着 */
.jyc-scale::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 34px;
  width: 190px;
  height: 22px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .28) 48%, transparent 74%);
  pointer-events: none;
}

/* 顶部暖光柱：黄铜要有光源才像黄铜 */
.jyc-scale::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -6px;
  width: 300px;
  height: 150px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 214, 138, .20) 0%, transparent 68%);
  pointer-events: none;
}

/* ---------- 立柱（静止） ---------- */
.jsc-stand {
  position: absolute;
  left: 50%;
  bottom: 44px;
  width: 84px;
  height: 135px;
  margin-left: -42px;
  background: var(--scale-parts) no-repeat;
  background-size: 357.14% 222.22%;
  background-position: 84.72% 1.818%;
  z-index: 1;
}

/* ---------- 横梁（绕枢轴旋转） ---------- */
.jsc-beam {
  position: absolute;
  left: calc(50% - 129px);
  top: 68px;
  width: 260px;
  height: 85px;
  background: var(--scale-parts) no-repeat;
  background-size: 181.82% 555.56%;
  background-position: 2.222% 20.73%;
  transform-origin: 49.6% 50%;
  transform: rotate(var(--ang));
  z-index: 3;
  will-change: transform;
}

/* ---------- 吊挂点（挂在横梁两端的钩子上） ---------- */
.jsc-hang {
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  transform-origin: 0 0;
  z-index: 4;
}
.jsc-hang-l { left: 5%;  transform: rotate(var(--sl)); }
.jsc-hang-r { left: 95%; transform: rotate(var(--sr)); }

/* ---------- 托盘 ---------- */
.jsc-pan {
  position: absolute;
  left: -41px;
  top: -9px;
  width: 84px;
  height: 117px;
  background: var(--scale-parts) no-repeat;
  pointer-events: none;
}
.jsc-pan-cheese { background-size: 303.03% 217.39%; background-position: 17.91%  92.59%; }
.jsc-pan-coins  { background-size: 298.50% 217.39%; background-position: 86.47%  92.59%; }

/* ---------- 黄铜读数铭牌 ---------- */
.jsc-tag {
  position: absolute;
  bottom: 6px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 5px;
  font-family: 'Rajdhani', 'Noto Sans SC', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .4px;
  color: #2a1a06;
  background: linear-gradient(150deg, #ffeab0 0%, #e6b348 52%, #b8862b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .75),
    inset 0 -2px 4px rgba(90, 55, 8, .45),
    0 3px 8px rgba(0, 0, 0, .55);
  z-index: 5;
  white-space: nowrap;
}
.jsc-tag i { font-size: 11px; opacity: .8; }
.jsc-tag-l { left: calc(50% - 117px); }
.jsc-tag-r { left: calc(50% + 117px); }

/* ---------- 胜负瞬间：奶酪盘发金光 / 金币盘泛红 ---------- */
.jyc-scale.jsc-win  .jsc-pan-cheese { filter: drop-shadow(0 0 16px rgba(255, 206, 92, .95)) brightness(1.16); }
.jyc-scale.jsc-win  .jsc-tag-l { animation: jscTagPop .5s ease-out 2; }
.jyc-scale.jsc-lose .jsc-pan-coins  { filter: drop-shadow(0 0 14px rgba(255, 96, 96, .8)) brightness(1.08); }
.jyc-scale.jsc-lose .jsc-pan-cheese { filter: grayscale(.5) brightness(.72); }
@keyframes jscTagPop {
  0%, 100% { transform: translateX(-50%) scale(1); }
  45%      { transform: translateX(-50%) scale(1.16); }
}

/* 掂量中：立柱轻微受力 */
.jyc-scale.jsc-quiver .jsc-stand { animation: jscStrain .16s linear infinite; }
@keyframes jscStrain {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(.6px); }
}

/* ---------- 天平所在卡片：让它像放在工作台上 ---------- */
body[data-game="classic"] .jyc-scale + .roll-display { margin-top: 2px; }

/* ---------- 小屏：整体缩放，几何关系不变 ---------- */
@media (max-width: 560px) {
  .jyc-scale { height: 214px; }
  .jyc-scale > * { transform-box: border-box; }
  .jsc-stand { bottom: 34px; width: 66px; height: 106px; margin-left: -33px; }
  .jsc-beam  { left: calc(50% - 101px); top: 54px; width: 204px; height: 67px; }
  .jsc-pan   { left: -32px; top: -7px; width: 66px; height: 92px; }
  .jsc-tag   { font-size: 12px; padding: 2px 7px; }
  .jsc-tag-l { left: calc(50% - 92px); }
  .jsc-tag-r { left: calc(50% + 92px); }
  .jyc-scale::after { width: 150px; bottom: 26px; }
}

/* ---------- 无障碍：关掉物理，保留静态倾斜 ---------- */
@media (prefers-reduced-motion: reduce) {
  .jsc-beam, .jsc-hang { transition: transform .25s ease-out; }
  .jyc-scale.jsc-quiver .jsc-stand { animation: none !important; }
}