/* -*- 机械暗河转盘（2026-11-02，jxwhl- 前缀独立模块；index.html 引入 ?v=2） -*-
 * 机械铜橙配色（与 #jx-chip/#jx-enter 三件套同源：深钢底 rgba(52,26,6)+铜橙描边）。
 * 2026-11-02b：扇区弃 emoji 换真素材（it24/it82/bless_icon），铜环圆徽章镶边+盘面高光。 */

/* ===== 入口按钮（对标 #nb-flip-btn，仅在机械暗河副本内可见） ===== */
#jx-wheel-btn { position: absolute; top: 104px; left: 10px; z-index: 6;
  width: 40px; height: 40px; border-radius: 50%; border: 2px solid #b06a2a; cursor: pointer;
  font-size: 19px; line-height: 1; color: #ffcc80;
  background: linear-gradient(160deg, rgba(96,50,12,.95), rgba(40,20,6,.95));
  box-shadow: 0 2px 8px rgba(0,0,0,.5), inset 0 0 8px rgba(255,150,40,.18); }
#jx-wheel-btn:hover { transform: scale(1.08); filter: brightness(1.15); }
#jx-wheel-btn:active { transform: scale(.95); }
#jx-wheel-btn.hidden { display: none; }
#jx-wheel-btn.ready::after { content: ''; position: absolute; top: -2px; right: -2px;
  width: 12px; height: 12px; border-radius: 50%; background: #ff5252;
  box-shadow: 0 0 8px #ff5252; animation: jxwhl-pulse 1.1s ease-in-out infinite; }
@keyframes jxwhl-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.45); opacity: .65; } }

/* ===== 弹层骨架 ===== */
#jxwhl-ov { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  background: rgba(8, 4, 2, .78); backdrop-filter: blur(2px); }
#jxwhl-ov.hidden { display: none; }
#jxwhl-panel { width: min(400px, 92vw); max-height: min(92vw, 88vh); overflow-y: auto;
  border-radius: 16px; padding: 14px 16px 16px;
  background: linear-gradient(165deg, rgba(58,30,8,.97), rgba(26,13,4,.97) 55%, rgba(14,7,2,.97));
  border: 2px solid #b06a2a; box-shadow: 0 10px 40px rgba(0,0,0,.65), inset 0 0 24px rgba(255,150,40,.08); }
#jxwhl-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
#jxwhl-head span { font-size: 16px; font-weight: bold; color: #ffcc80; letter-spacing: 1px; }
#jxwhl-x { width: 28px; height: 28px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.14); color: #ffe0b2; font-size: 15px; line-height: 1; }
#jxwhl-x:hover { background: rgba(255,255,255,.24); }
#jxwhl-tip { font-size: 12px; color: #d8a86a; margin-bottom: 8px; line-height: 1.5; }
#jxwhl-bless { min-height: 0; margin-bottom: 6px; }
.jxwhl-bless-tag { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px;
  background: rgba(255,152,0,.16); border: 1px solid rgba(255,183,77,.5); color: #ffcc80; }
.jxwhl-load { padding: 34px 10px; font-size: 14px; color: #d8a86a; line-height: 1.8; text-align: center; }

/* ===== 转盘本体 ===== */
#jxwhl-wheelbox { position: relative; width: 270px; height: 270px; margin: 6px auto 10px; }
/* 外齿圈：一圈厚铜环 + 齿轮纹（2026-11-02c 简化：去掉圈中圈细环带） */
#jxwhl-ring { position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 0 116px, #8a5218 116px 128px, rgba(0,0,0,0) 128px),
    repeating-conic-gradient(from 0deg, #6e4214 0deg 9deg, #2e1a06 9deg 15deg);
  box-shadow: 0 6px 22px rgba(0,0,0,.6), inset 0 0 14px rgba(255,150,40,.15); }
/* 铆钉灯 ×12（JS 定角）：转出奖励时整体亮起由 .hit 类驱动 */
.jxwhl-dot { position: absolute; top: 50%; left: 50%; margin: -3.5px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #ffcc80; box-shadow: 0 0 6px rgba(255,204,128,.8); }
/* 盘面：2026-11-02c 弃 3px 铜描边（圈中圈），扇区重排为「祝福正上/星贝右下/鎏金饵左下」指针指正一个奖品 */
#jxwhl-wheel { position: absolute; inset: 15px; border-radius: 50%; overflow: hidden;
  background: conic-gradient(from 0deg,
    #7a4a10 0deg 60deg,    /* ✨ 副本祝福（中心 0° 正上，回绕段） */
    #0f3a5e 60deg 180deg,  /* 🎁 星贝盲盒（中心 120° 右下） */
    #4a3a10 180deg 300deg, /* 🪱 鎏金饵（中心 240° 左下） */
    #7a4a10 300deg 360deg  /* ✨ 副本祝福（中心 0°，跨 0° 段） */
  );
  box-shadow: inset 0 0 26px rgba(0,0,0,.55), 0 0 18px rgba(255,140,40,.22);
  transition: transform 3.6s cubic-bezier(.14, .82, .12, 1);
  will-change: transform; }
/* 扇区分隔铆线：三条细亮线落在 60/180/300° 扇区边界上，随盘转 */
#jxwhl-wheel::before { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(from 60deg, rgba(255,220,170,.35) 0deg 1.2deg, rgba(0,0,0,0) 1.2deg 120deg); }
/* 盘面质感：左上高光 + 边缘内阴影（画在分隔线之上，z 序后者居上） */
#jxwhl-wheel::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 32% 24%, rgba(255,244,220,.16), rgba(0,0,0,0) 44%),
              radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 54%, rgba(0,0,0,.4) 100%); }
/* 扇区标签：JS 定角（rotate(c) translateY(-88) rotate(-c)），真素材圆徽章+名称
   2026-11-02：加 .35s 过渡——落定文字直立补偿（jxwheel.js uprightLabels）回正时平滑不跳变 */
.jxwhl-label { position: absolute; top: 50%; left: 50%; width: 96px; margin: -48px 0 0 -48px;
  display: flex; flex-direction: column; align-items: center; gap: 3px; pointer-events: none;
  transition: transform .35s ease-out; }
.jxwhl-icow { width: 58px; height: 58px; border-radius: 50%; overflow: hidden; display: flex;
  border: 2px solid rgba(224,164,94,.8);
  background: radial-gradient(circle at 35% 28%, rgba(255,226,170,.3), rgba(10,6,2,.55) 78%);
  box-shadow: 0 3px 8px rgba(0,0,0,.55), inset 0 0 8px rgba(255,226,170,.2); }
.jxwhl-icow img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jxwhl-label i { font-style: normal; font-size: 11px; font-weight: bold; color: #ffe9c8;
  text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 6px rgba(255,170,60,.4); letter-spacing: 1px; }
/* 中心枢纽 = 转 */
#jxwhl-hub { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 66px; height: 66px; border-radius: 50%; cursor: pointer;
  font-size: 14px; color: #fff3e0; letter-spacing: 2px;
  background: radial-gradient(circle at 34% 30%, #d98f3e, #8a5218 58%, #4a2a0c);
  border: 3px solid #ffd9a8; box-shadow: 0 3px 12px rgba(0,0,0,.6), inset 0 0 10px rgba(255,220,170,.35); }
#jxwhl-hub b { font-size: 19px; font-weight: bold; }
#jxwhl-hub:hover { filter: brightness(1.12); }
#jxwhl-hub:active { transform: translate(-50%, -50%) scale(.94); }
#jxwhl-hub.busy { pointer-events: none; filter: saturate(.6) brightness(.85); }
/* 顶部指针 */
#jxwhl-pointer { position: absolute; top: -4px; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 0; height: 0; border-left: 11px solid transparent; border-right: 11px solid transparent;
  border-top: 20px solid #ffd9a8; filter: drop-shadow(0 2px 4px rgba(0,0,0,.7)); }

/* ===== 底部进度区（同 nbflip 口径） ===== */
.jxwhl-left { font-size: 14px; color: #ffe9c8; text-align: center; margin-bottom: 4px; }
.jxwhl-left b { color: #ffb74d; font-size: 16px; }
.jxwhl-progress { width: 82%; height: 10px; margin: 6px auto; border-radius: 999px;
  background: rgba(0,0,0,.5); border: 1px solid rgba(255,150,40,.35); overflow: hidden; }
.jxwhl-bar { height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #b06a2a, #ffb74d); box-shadow: 0 0 8px rgba(255,183,77,.7);
  transition: width .4s ease; }
.jxwhl-sub { font-size: 11px; color: #c09055; text-align: center; line-height: 1.6; }

/* ===== 移动端横屏反制（body.lm-rot 旋转态视口仍竖屏，同 nb 模块口径） ===== */
body.lm-rot #jxwhl-panel { max-height: min(100vw, 100vh); }