/* ========================================================= JYC 的游戏世界 · 六格粮仓 —— 配套渲染素材层 Six Grain Silo · rendered asset layer --------------------------------------------------------- 设计原则：格子不是「像木门的盒子」，格子就是一扇仓闸。 技术方案：Sprite Sheet（单图切格） images/six/bins.png 1168x880 3列x2行 六扇编号仓闸 images/six/dice.png 1248x832 3列x2行 六面奶酪骰 两张图代替十二个文件 —— 体积省 5 倍，请求省 10 次。 切格方式：background-size:300% 200% + background-position 骰面自带 data-v 属性（core.js dieHTML）→ 全程零 JS 侵入。 ========================================================= */ :root { --six-bins: url(../images/six/bins.png); --six-dice: url(../images/six/dice.png); } /* ========================================================= 一、六扇仓闸 —— 真实渲染木门贴图 ========================================================= */ body[data-game="six"] .bet-cell { border: none !important; border-radius: 12px 12px 7px 7px !important; background-color: #2b1a0d !important; /* 第一层：暖光提亮（soft-light 抬中间调，把木纹细节从暗部救回来） 第二层：仓闸贴图。渐变层 size:auto → 自动铺满整格，position 对它无效， 所以下面每格只改 position，不会破坏提亮层。 */ background-image: linear-gradient(180deg, rgba(255, 224, 170, .34) 0%, rgba(255, 198, 130, .16) 52%, rgba(255, 190, 120, .04) 100%), var(--six-bins) !important; background-size: auto, 300% 200% !important; background-repeat: no-repeat, no-repeat !important; background-blend-mode: soft-light, normal !important; min-height: 164px !important; padding: 15px 10px 14px !important; gap: 6px !important; overflow: hidden; } /* 切格：CELL_META 顺序 = 1..6 点，与贴图阅读顺序完全一致 */ body[data-game="six"] .bet-cell[data-cell="0"] { background-position: 0% 0% !important; } body[data-game="six"] .bet-cell[data-cell="1"] { background-position: 50% 0% !important; } body[data-game="six"] .bet-cell[data-cell="2"] { background-position: 100% 0% !important; } body[data-game="six"] .bet-cell[data-cell="3"] { background-position: 0% 100% !important; } body[data-game="six"] .bet-cell[data-cell="4"] { background-position: 50% 100% !important; } body[data-game="six"] .bet-cell[data-cell="5"] { background-position: 100% 100% !important; } /* 贴图自带铁质加固带 → 关掉原来 CSS 画的那条铰链，避免双层 */ body[data-game="six"] .bet-cell::before { display: none !important; } /* 可读性纱：压住烙印数字，让奶酪骰成为视觉主角 （继承 .bet-cell::after 的 inset:0 / z-index:-1 → 位于贴图之上、文字之下） */ body[data-game="six"] .bet-cell::after { background: radial-gradient(ellipse at 50% 38%, rgba(12, 6, 2, .52) 0%, rgba(12, 6, 2, .18) 54%, transparent 78%), linear-gradient(180deg, rgba(255, 236, 196, .12) 0%, transparent 32%, rgba(0, 0, 0, .26) 72%, rgba(0, 0, 0, .50) 100%) !important; } /* 文字接地：刻在木头上，而不是浮在木头上 */ body[data-game="six"] .bet-cell b, body[data-game="six"] .bet-cell .bc-pot, body[data-game="six"] .bet-cell .bc-mine { text-shadow: 0 1px 0 rgba(0, 0, 0, .9), 0 2px 6px rgba(0, 0, 0, .8) !important; } body[data-game="six"] .bc-heads .mini-av { background: #2a1a0c !important; border-color: rgba(255, 226, 168, .34) !important; box-shadow: 0 2px 5px rgba(0, 0, 0, .6); margin-left: -3px; } /* 底部信息区透气：池额与鼠头不要挤在闸门边缘 */ body[data-game="six"] .bet-cell .bc-pot { font-size: 10.5px !important; letter-spacing: .2px; } body[data-game="six"] .bet-cell .bc-mine { min-height: 14px; font-size: 11px !important; } body[data-game="six"] .bet-cell .bc-heads { min-height: 22px; padding-top: 1px; } /* hover：闸门被抬起一寸，缝隙漏出粮仓金光 */ body[data-game="six"] .bet-cell:hover { transform: translateY(-5px) !important; filter: brightness(1.1) saturate(1.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 15px 28px rgba(0, 0, 0, .62), 0 0 30px rgba(245, 196, 81, .42) !important; } /* 已下注：闸门被贴上金封条 */ body[data-game="six"] .bet-cell.mine { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 2px var(--gold), 0 8px 22px rgba(0, 0, 0, .5), 0 0 32px rgba(245, 196, 81, .52) !important; } body[data-game="six"] .bet-cell.mine::after { background: radial-gradient(ellipse at 50% 40%, rgba(12, 6, 2, .46) 0%, rgba(12, 6, 2, .14) 52%, transparent 76%), linear-gradient(180deg, rgba(255, 216, 130, .22) 0%, transparent 40%, rgba(0, 0, 0, .48) 100%) !important; } /* 开闸命中：闸门弹开，粮食金光炸出来 */ body[data-game="six"] .bet-cell.hitcell { animation: jycSiloOpen .8s ease-out 2 !important; box-shadow: 0 0 0 2px var(--green), 0 0 40px rgba(120, 255, 160, .5), 0 10px 26px rgba(0, 0, 0, .55) !important; } @keyframes jycSiloOpen { 0% { filter: brightness(1) saturate(1); transform: translateY(0) scale(1); } 35% { filter: brightness(1.55) saturate(1.3); transform: translateY(-7px) scale(1.035); } 100% { filter: brightness(1) saturate(1); transform: translateY(0) scale(1); } } /* 未中：闸门关死、蒙灰 */ body[data-game="six"] .bet-cell.dim { opacity: .52 !important; filter: grayscale(.55) brightness(.62) !important; } /* 赔率牌：钉在闸门上的黄铜片 */ body[data-game="six"] .bc-odds { color: #2a1a08; background: linear-gradient(135deg, #ffe9ae, #dfa438); border-radius: 4px; padding: 1.5px 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .6); z-index: 2; } /* ========================================================= 二、奶酪骰 —— 鼠牙啃出来的点数 骰面用真实渲染贴图，点位靠 data-v 切格（1..6） ========================================================= */ body[data-game="six"] .die { background-color: #c99433 !important; background-image: var(--six-dice) !important; background-size: 300% 200% !important; background-repeat: no-repeat !important; border-radius: calc(var(--sz, 62px) * .19) !important; padding: 0 !important; /* 奶酪骰是每格的主角 —— 放大 16%，压住那块木头 */ width: calc(var(--sz, 62px) * 1.16) !important; height: calc(var(--sz, 62px) * 1.16) !important; box-shadow: inset 0 0 0 1px rgba(255, 244, 208, .22), inset 0 -6px 14px rgba(70, 34, 6, .45), 0 10px 20px -8px rgba(0, 0, 0, .95) !important; } body[data-game="six"] .die[data-v="1"] { background-position: 0% 0% !important; } body[data-game="six"] .die[data-v="2"] { background-position: 50% 0% !important; } body[data-game="six"] .die[data-v="3"] { background-position: 100% 0% !important; } body[data-game="six"] .die[data-v="4"] { background-position: 0% 100% !important; } body[data-game="six"] .die[data-v="5"] { background-position: 50% 100% !important; } body[data-game="six"] .die[data-v="6"] { background-position: 100% 100% !important; } /* 原来的白色圆点全部让位给啃洞 */ body[data-game="six"] .die > i { display: none !important; } /* 骰面高光：一层薄油光，让奶酪看起来是「实物」 */ body[data-game="six"] .die::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(158deg, rgba(255, 255, 255, .26) 0%, transparent 38%, rgba(60, 28, 0, .18) 100%); pointer-events: none; } /* 开奖托盘里的那颗大奶酪骰：加一圈暖光，坐实「刚从仓里滚出来」 */ body[data-game="six"] .dice-tray .die { box-shadow: inset 0 0 0 1px rgba(255, 244, 208, .28), inset 0 -8px 18px rgba(70, 34, 6, .45), 0 14px 30px -10px rgba(0, 0, 0, .95), 0 0 44px rgba(240, 178, 62, .34) !important; } /* ========================================================= 三、边注木牌 —— 与仓闸同源的木料（同图取一小块无字木纹） ========================================================= */ body[data-game="six"] .sbet { border: none !important; border-radius: 8px !important; background-color: #4a2d16 !important; background-image: var(--six-bins) !important; background-size: 900% 600% !important; background-position: 14% 84% !important; background-repeat: no-repeat !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -2px 6px rgba(0, 0, 0, .5), 0 5px 12px rgba(0, 0, 0, .45) !important; } body[data-game="six"] .sbet b { color: #fff3d6 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, .85); } body[data-game="six"] .sbet span { color: #e5cfa6 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); } body[data-game="six"] .sbet:hover { transform: translateY(-3px); filter: brightness(1.12); } body[data-game="six"] .sbet.mine { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 2px var(--gold), 0 0 22px rgba(245, 196, 81, .45) !important; } body[data-game="six"] .sbet.hitcell { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 2px var(--green), 0 0 26px rgba(34, 197, 94, .55) !important; } /* ========================================================= 四、小屏适配 & 降级 ========================================================= */ @media (max-width: 520px) { body[data-game="six"] .bet-cell { min-height: 132px !important; padding: 12px 7px 8px !important; border-radius: 10px 10px 6px 6px !important; } } @media (prefers-reduced-motion: reduce) { body[data-game="six"] .bet-cell.hitcell { animation: none !important; } }