/* ========================================================= JYC 的游戏世界 · 偷粮转盘 —— 真实转盘素材层 Crumb Wheel · rendered wheel layer --------------------------------------------------------- 素材：images/wheel/face.png（1024x1024，实心） 12 瓣等分、分隔条精准落在 12 点整（偏移 0°）、十二瓣同材质 外圈黄铜轮箍占半径 15%，中心轮毂盖占半径 20% --------------------------------------------------------- 核心手法：让"贴图"和"赔率色标"各干一件事 ::before 真实转盘贴图 → 提供明度与材质（木纹 / 铆钉 / 奶酪） ::after background:inherit 继承引擎那条 inline conic-gradient + mix-blend-mode:color → 只提供色相（哪格有肉） 于是 drawWheel() 的 conic-gradient 一行不改，仍然是唯一的赔率真相来源， 但玩家看到的是一口真的黄铜奶酪轮。 ========================================================= */ :root { --wheel-face: url(../images/wheel/face.png); } /* ---------- 轮体：卸掉 CSS 金边，换成贴图自带的黄铜轮箍 ---------- */ body[data-game="wheel"] .wheel-disc { border: none !important; background-color: #120a1c; box-shadow: 0 0 58px -14px rgba(240, 190, 90, .58), 0 14px 34px rgba(0, 0, 0, .62), inset 0 0 40px rgba(0, 0, 0, .5) !important; } /* ---------- 第一层：真实转盘贴图 ---------- */ body[data-game="wheel"] .wheel-disc::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--wheel-face) center / 100% 100% no-repeat; /* 若日后素材换成非 12 点起分的版本，只需改这一个变量即可对齐 */ transform: rotate(var(--wheel-fix, 0deg)); z-index: 1; transition: filter .3s ease; } /* ---------- 第二层：赔率色标（继承同一条 conic-gradient，只取色相） ---------- */ body[data-game="wheel"] .wheel-disc::after { content: ''; position: absolute; inset: 8.5% !important; border-radius: 50%; background: inherit !important; /* ← 引擎的 inline conic-gradient */ border: none !important; box-shadow: none !important; /* overlay：深色标 → 压暗（空仓格不受光）；亮色标 → 提亮（有肉格被照亮） 比 color 混色多给了一组明度对比，同时把木纹与奶酪的质感完整留下 */ mix-blend-mode: overlay; opacity: 1; filter: saturate(1.18) contrast(1.06); /* 中心让位给轮毂盖，别把黄铜染色 */ -webkit-mask-image: radial-gradient(circle, transparent 0 22%, #000 27%); mask-image: radial-gradient(circle, transparent 0 22%, #000 27%); z-index: 2; pointer-events: none; } /* ---------- 轮篍镜面高光：借不旋转的 .wheel-hub 画一层定向反光 ---------- 它不随轮子转 → 物理上才对：光源是固定的，黄铜上的高光就不应该跟着转 */ body[data-game="wheel"] .wheel-hub { font-size: 0 !important; border-radius: 50%; background: /* 轮箍上的一圈镜面反光 */ radial-gradient(circle, transparent 0 87.5%, rgba(255, 234, 176, .40) 91%, rgba(255, 234, 176, .07) 95%, transparent 97.5%), /* 左上角固定光源打在整个轮面上的柔光（与贴图自身光向一致） */ radial-gradient(ellipse 66% 46% at 24% 10%, rgba(255, 246, 220, .17) 0%, transparent 62%); } body[data-game="wheel"] .wheel-hub > span { display: grid; place-items: center; width: 35%; aspect-ratio: 1; border-radius: 50%; font-size: 20px; font-weight: 900; letter-spacing: 1px; color: #ffe6ac; text-shadow: 0 2px 6px rgba(0, 0, 0, .95); background: radial-gradient(circle at 50% 34%, rgba(60, 40, 12, .82) 0%, rgba(18, 10, 4, .92) 72%); border: 2.5px solid rgba(232, 194, 106, .62); box-shadow: inset 0 2px 8px rgba(0, 0, 0, .9), inset 0 -1px 0 rgba(255, 226, 160, .35), 0 4px 14px rgba(0, 0, 0, .7), 0 0 22px rgba(240, 190, 90, .28); } html[lang="en"] body[data-game="wheel"] .wheel-hub > span { font-size: 13px; letter-spacing: 0; } /* ---------- 指针：铸铁楔钉，不再是一个 CSS 三角 ---------- */ body[data-game="wheel"] .wheel-pointer { top: -19px; width: 32px; height: 44px; border: none !important; border-radius: 3px; transform-origin: 50% 10%; transform: translateX(-50%); /* 横向圆柱式渐变 → 铸铁楛钉的体积感；双重投影：一层贴身、一层落在轮面上 */ background: linear-gradient(100deg, #6b4610 0%, #b98829 16%, #f4cd72 34%, #fff8e2 46%, #e2ab3e 60%, #a97a22 80%, #5e3d0d 100%); clip-path: polygon(50% 100%, 6% 26%, 22% 2%, 78% 2%, 94% 26%); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .95)) drop-shadow(0 13px 7px rgba(0, 0, 0, .55)); } /* 钉库卡箍：画在 .wheel-wrap 上，所以指针拨动时卡箍不跟着摆 */ body[data-game="wheel"] .wheel-wrap::before { content: ''; position: absolute; left: 50%; top: -27px; width: 58px; height: 19px; margin-left: -29px; border-radius: 5px 5px 3px 3px; background: linear-gradient(180deg, #d8ab4e 0%, #a97a24 42%, #4e3410 100%); box-shadow: inset 0 1px 0 rgba(255, 245, 214, .8), inset 0 -2px 4px rgba(0, 0, 0, .6), 0 4px 10px rgba(0, 0, 0, .7); z-index: 3; } /* 卡箍上的两颗螺栓 */ body[data-game="wheel"] .wheel-wrap::after { content: ''; position: absolute; left: 50%; top: -22px; width: 40px; height: 8px; margin-left: -20px; background: radial-gradient(circle at 12% 50%, #fff6da 0 22%, #a97a22 34%, transparent 46%), radial-gradient(circle at 88% 50%, #fff6da 0 22%, #a97a22 34%, transparent 46%); z-index: 4; pointer-events: none; } /* 钉帽铆钉 */ body[data-game="wheel"] .wheel-pointer::after { content: ''; position: absolute; left: 50%; top: 7px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #fff6da, #b98829 62%, #6b4610); box-shadow: 0 1px 2px rgba(0, 0, 0, .8); } /* ---------- 旋转中：运动模糊 + 轮箍发热 + 指针被挡片连续拨动 ---------- */ body[data-game="wheel"] .wheel-wrap.wh-spin .wheel-disc::before { filter: blur(1.15px) brightness(1.08) saturate(1.05); } body[data-game="wheel"] .wheel-wrap.wh-spin .wheel-disc { box-shadow: 0 0 78px -8px rgba(255, 202, 92, .78), 0 14px 34px rgba(0, 0, 0, .62), inset 0 0 40px rgba(0, 0, 0, .45) !important; } body[data-game="wheel"] .wheel-wrap.wh-spin .wheel-pointer { animation: jwPointerTick .085s linear infinite; } @keyframes jwPointerTick { 0%, 100% { transform: translateX(-50%) rotate(0deg); } 40% { transform: translateX(-50%) rotate(8deg); } 70% { transform: translateX(-50%) rotate(-2deg); } } /* ---------- 停格瞬间：指针回弹 + 轮体沉一下 ---------- */ body[data-game="wheel"] .wheel-wrap.wh-land .wheel-pointer { animation: jwPointerLand .55s cubic-bezier(.16, 1, .3, 1); } @keyframes jwPointerLand { 0% { transform: translateX(-50%) rotate(11deg); } 55% { transform: translateX(-50%) rotate(-4deg); } 100% { transform: translateX(-50%) rotate(0deg); } } body[data-game="wheel"] .wheel-wrap.wh-land .wheel-hub > span { animation: jwHubPulse .6s ease-out; } @keyframes jwHubPulse { 0%, 100% { transform: scale(1); box-shadow: inset 0 2px 8px rgba(0, 0, 0, .9), 0 4px 14px rgba(0, 0, 0, .7), 0 0 22px rgba(240, 190, 90, .28); } 40% { transform: scale(1.07); box-shadow: inset 0 2px 8px rgba(0, 0, 0, .9), 0 4px 14px rgba(0, 0, 0, .7), 0 0 40px rgba(255, 210, 110, .75); } } /* ---------- 风险档按钮 & 图例：黄铜化，与轮体同一套材质 ---------- */ /* 未选中的档位：钉在墙上的木牌 */ body[data-game="wheel"] .risk-toggle .chip { border: none !important; background: linear-gradient(168deg, #6d4a26, #3d2611) !important; color: #e8d3ac !important; box-shadow: inset 0 1px 0 rgba(255, 226, 168, .26), inset 0 -2px 5px rgba(0, 0, 0, .5), 0 4px 10px rgba(0, 0, 0, .45) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); } body[data-game="wheel"] .risk-toggle .chip.on { color: #2a1a06 !important; background: linear-gradient(150deg, #ffeab0, #e6b348 54%, #b8862b) !important; border-color: rgba(255, 232, 176, .8) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 3px 10px rgba(0, 0, 0, .55) !important; } body[data-game="wheel"] .wl-item { border: none !important; background: linear-gradient(168deg, rgba(96, 66, 30, .55), rgba(38, 24, 10, .62)) !important; box-shadow: inset 0 1px 0 rgba(255, 226, 160, .22), 0 4px 10px rgba(0, 0, 0, .45); } body[data-game="wheel"] .wl-item.hit { background: linear-gradient(168deg, rgba(34, 197, 94, .3), rgba(10, 60, 28, .55)) !important; box-shadow: 0 0 0 2px var(--green), 0 0 24px rgba(34, 197, 94, .5) !important; } /* ---------- 小屏 & 降级 ---------- */ @media (max-width: 560px) { body[data-game="wheel"] .wheel-pointer { width: 26px; height: 36px; top: -15px; } body[data-game="wheel"] .wheel-hub > span { font-size: 17px; } } @media (prefers-reduced-motion: reduce) { body[data-game="wheel"] .wheel-wrap.wh-spin .wheel-pointer, body[data-game="wheel"] .wheel-wrap.wh-land .wheel-pointer, body[data-game="wheel"] .wheel-wrap.wh-land .wheel-hub > span { animation: none !important; } body[data-game="wheel"] .wheel-wrap.wh-spin .wheel-disc::before { filter: none; } }