/* =========================================================
   JYC 鼠界 · 情境化界面层 jyc-diegetic.css
   ---------------------------------------------------------
   核心思路：Diegetic UI（叙事内界面）。
   交互元素不再是「浮在场景上的玻璃按钮」，而是
   「长在场景里的实物」—— 木仓闸、石地砖、鼠洞、
   金属风管、奶酪块、木箱门。

   三个手法：
   ① 去面板化：主玩法容器近乎透明，让场景直接透上来
   ② 实物化  ：纯 CSS 材质系统（木/石/金属/奶酪/泥土/瓷砖）
   ③ 接地感  ：投影落在场景上 + 顶部环境光洗过元素表面
   ========================================================= */

/* =======================================================
   〇、材质变量库
   ======================================================= */
:root {
  /* 木材：橡木条纹 */
  --mat-wood-a: #6b4423;
  --mat-wood-b: #4a2d16;
  --mat-wood-c: #8a5c31;
  /* 石材：地窖青石 */
  --mat-stone-a: #4a4358;
  --mat-stone-b: #2c2739;
  /* 镀锌金属 */
  --mat-metal-a: #7c86a0;
  --mat-metal-b: #3c4356;
  /* 奶酪 */
  --mat-cheese-a: #ffdf95;
  --mat-cheese-b: #d99f34;
  /* 泥土 / 洞口 */
  --mat-earth-a: #4b3524;
  --mat-earth-b: #1a0f08;
  /* 厨房瓷砖 */
  --mat-tile-a: #cfd6e4;
  --mat-tile-b: #8b93a6;
}

/* =======================================================
   一、去面板化：让场景真正透上来
   ======================================================= */
body.in-game .game-body > .card {
  background: linear-gradient(160deg, rgba(24, 14, 42, .34), rgba(12, 7, 22, .26)) !important;
  border: 1px solid rgba(168, 85, 247, .16) !important;
  backdrop-filter: blur(9px) saturate(1.1);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .34);
}
/* 主玩法容器（第一张卡）几乎完全透明——元素直接站在场景里 */
body.in-game .game-body > .card:first-child {
  background: linear-gradient(180deg, rgba(16, 9, 30, .20), rgba(10, 6, 18, .10)) !important;
  border-color: rgba(245, 196, 81, .14) !important;
  backdrop-filter: blur(4px);
}

/* 背景更清晰一档，元素与环境才咬得住 */
#jyc-backdrop.has-scene .jyc-bd-art {
  filter: blur(1.4px) saturate(1.2) brightness(.80) contrast(1.1);
}
#jyc-backdrop.has-scene .jyc-bd-veil {
  background:
    radial-gradient(ellipse at 50% 28%, transparent 18%, rgba(11, 7, 19, .20) 58%, rgba(11, 7, 19, .70) 100%),
    linear-gradient(180deg, rgba(11, 7, 19, .16) 0%, rgba(11, 7, 19, .34) 40%, rgba(11, 7, 19, .80) 100%);
}

/* =======================================================
   二、通用「实物」基底
   凡是套了实物材质的元素，都拿到：
   顶部环境光、底部接地投影、边缘倒角
   ======================================================= */
.jyc-solid,
body.in-game .bet-cell,
body.in-game .sbet,
body.in-game .mine-cell,
body.in-game .door {
  position: relative;
  isolation: isolate;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .20),          /* 顶部受光 */
    inset 0 -2px 6px rgba(0, 0, 0, .48),             /* 底部内暗 */
    0 6px 14px rgba(0, 0, 0, .46),                   /* 接地投影 */
    0 1px 0 rgba(0, 0, 0, .6);
  transition: transform .18s cubic-bezier(.16, 1, .3, 1),
              box-shadow .18s ease, filter .18s ease;
}

/* 顶部环境光洗过表面 */
body.in-game .bet-cell::after,
body.in-game .mine-cell::after,
body.in-game .door::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), transparent 46%);
  pointer-events: none;
  z-index: -1;
}

/* =======================================================
   三、六格粮仓 → 六扇木质仓闸
   ======================================================= */
body[data-game="six"] .bet-cell {
  border: none !important;
  border-radius: 10px 10px 6px 6px !important;
  background:
    /* 木板竖向拼缝 */
    repeating-linear-gradient(90deg,
      rgba(0, 0, 0, .30) 0 1px,
      transparent 1px 15%,
      rgba(255, 255, 255, .05) 15.2% 15.6%,
      transparent 15.8% 16.6%),
    /* 木纹横向纹理 */
    repeating-linear-gradient(2deg,
      rgba(0, 0, 0, .10) 0 2px,
      transparent 2px 7px),
    linear-gradient(168deg, var(--mat-wood-c) 0%, var(--mat-wood-a) 42%, var(--mat-wood-b) 100%) !important;
}
/* 顶部铁质铰链横条 */
body[data-game="six"] .bet-cell::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 9px;
  background: linear-gradient(180deg, #9aa3b4, #4d5464 60%, #2b303c);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .4);
  z-index: 1;
}
body[data-game="six"] .bet-cell b { color: #fff3d6 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
body[data-game="six"] .bc-odds {
  color: #2a1a08;
  background: linear-gradient(135deg, #ffe6a3, #e0a83c);
  border-radius: 4px;
  padding: 1px 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  z-index: 2;
}
body[data-game="six"] .bc-pot,
body[data-game="six"] .bc-pot b { color: #f0dcb4 !important; }
/* hover：闸门抬起，缝隙漏出粮仓金光 */
body[data-game="six"] .bet-cell:hover {
  transform: translateY(-5px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 14px 26px rgba(0, 0, 0, .58),
    0 0 26px rgba(245, 196, 81, .40);
}
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 30px rgba(245, 196, 81, .5) !important;
}
/* 边注 → 钉在仓壁上的木牌 */
body[data-game="six"] .sbet {
  border: none !important;
  border-radius: 7px !important;
  background: linear-gradient(168deg, #7a5330, #4a2d16) !important;
}
body[data-game="six"] .sbet b { color: #ffeec4 !important; }

/* =======================================================
   四、三洞觅食 → 墙根鼠洞
   ======================================================= */
body[data-game="sicbo"] .bet-cell,
body[data-game="sicbo"] .sbet {
  border: 2px solid #2a1c10 !important;
  border-radius: 50% 50% 14px 14px !important;
  background:
    radial-gradient(ellipse at 50% 78%, rgba(245, 196, 81, .34) 0%, transparent 52%),
    radial-gradient(ellipse at 50% 34%, var(--mat-earth-b) 22%, var(--mat-earth-a) 96%) !important;
  box-shadow:
    inset 0 8px 22px rgba(0, 0, 0, .82),
    inset 0 -2px 8px rgba(245, 196, 81, .18),
    0 4px 12px rgba(0, 0, 0, .5) !important;
}
body[data-game="sicbo"] .bet-cell:hover,
body[data-game="sicbo"] .sbet:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    inset 0 8px 22px rgba(0, 0, 0, .7),
    inset 0 -4px 16px rgba(245, 196, 81, .46),
    0 8px 20px rgba(0, 0, 0, .55) !important;
}
body[data-game="sicbo"] .bet-cell b,
body[data-game="sicbo"] .sbet b { color: #ffe6ac !important; text-shadow: 0 1px 4px #000; }

/* =======================================================
   五、捕鼠夹地窖 → 石板地砖
   ======================================================= */
body[data-game="mines"] .mine-grid { gap: 5px !important; }
body[data-game="mines"] .mine-cell {
  border: 1px solid #17121f !important;
  border-radius: 4px !important;
  background:
    /* 石面斑驳 */
    radial-gradient(ellipse 60% 40% at 28% 22%, rgba(255, 255, 255, .09), transparent 70%),
    radial-gradient(ellipse 40% 30% at 74% 68%, rgba(0, 0, 0, .34), transparent 70%),
    linear-gradient(152deg, var(--mat-stone-a), var(--mat-stone-b)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 -3px 7px rgba(0, 0, 0, .62),
    0 3px 7px rgba(0, 0, 0, .6) !important;
}
body[data-game="mines"] .mine-cell:not(:disabled):hover {
  transform: translateY(-3px) !important;
  filter: brightness(1.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 9px 18px rgba(0, 0, 0, .6),
    0 0 20px rgba(245, 196, 81, .34) !important;
}
/* 翻出奶酪：石板掀开，奶酪发光 */
body[data-game="mines"] .mine-cell.gem {
  background:
    radial-gradient(circle at 38% 30%, #fff2c4 0%, var(--mat-cheese-a) 38%, var(--mat-cheese-b) 100%) !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 0 26px rgba(245, 196, 81, .62) !important;
}
/* 踩到钢夹：红光炸裂 + 抖动 */
body[data-game="mines"] .mine-cell.bomb {
  background: radial-gradient(circle at 40% 32%, #ffb3b3, #8f1616 78%) !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 0 30px rgba(239, 68, 68, .72) !important;
  animation: jycSnap .34s ease;
}
@keyframes jycSnap {
  0%, 100% { transform: none; }
  22% { transform: translate(-3px, 1px) rotate(-2.5deg); }
  55% { transform: translate(3px, -1px) rotate(2.5deg); }
}

/* =======================================================
   六、阁楼八层 → 木箱小门
   ======================================================= */
body[data-game="tower"] .door {
  border: 1px solid #221607 !important;
  border-radius: 4px 4px 3px 3px !important;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 33%),
    linear-gradient(170deg, #7d5730, #4a2f17) !important;
}
/* 门把手 */
body[data-game="tower"] .door::before {
  content: '';
  position: absolute;
  right: 5px; top: 50%;
  width: 5px; height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffe6a3, #9c7018);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}
body[data-game="tower"] .tower-row.active .door:hover {
  transform: translateY(-4px) !important;
  filter: brightness(1.28);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .6), 0 0 22px rgba(245, 196, 81, .44) !important;
}
body[data-game="tower"] .door.safe {
  background: radial-gradient(circle at 40% 32%, #fff2c4, var(--mat-cheese-b)) !important;
  box-shadow: 0 0 24px rgba(245, 196, 81, .6) !important;
}
body[data-game="tower"] .door.trap {
  background: radial-gradient(circle at 40% 32%, #ffb3b3, #8f1616) !important;
  box-shadow: 0 0 24px rgba(239, 68, 68, .6) !important;
}
/* 层级标签 → 铁牌 */
body[data-game="tower"] .tower-row .lvl {
  background: linear-gradient(160deg, rgba(122, 132, 152, .30), rgba(40, 45, 58, .42));
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 2px 5px rgba(0, 0, 0, .45);
}
/* 当前层：月光从天窗打下来 */
body[data-game="tower"] .tower-row.active {
  background: linear-gradient(90deg, rgba(245, 196, 81, .20), rgba(216, 180, 254, .08) 60%, transparent);
  box-shadow: inset 0 0 0 1px rgba(245, 196, 81, .26);
  border-radius: 10px;
}

/* =======================================================
   七、通风管攀爬 → 镀锌金属
   ======================================================= */
body[data-game="limbo"] .game-body > .card:first-child {
  background:
    repeating-linear-gradient(180deg,
      rgba(255, 255, 255, .05) 0 1px,
      transparent 1px 13px),
    linear-gradient(170deg, rgba(60, 67, 86, .40), rgba(20, 22, 32, .34)) !important;
  border-color: rgba(124, 134, 160, .30) !important;
}
body[data-game="limbo"] .roll-display {
  text-shadow: 0 0 26px rgba(245, 196, 81, .6), 0 2px 6px rgba(0, 0, 0, .8);
}

/* =======================================================
   八、偷粮转盘 / 奶酪配方 → 奶酪质感
   ======================================================= */
body[data-game="wheel"] .game-body > .card:first-child,
body[data-game="poker"] .game-body > .card:first-child {
  border-color: rgba(245, 196, 81, .26) !important;
}
body[data-game="poker"] .die,
body[data-game="wheel"] .die {
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .5),
    inset 0 -3px 8px rgba(0, 0, 0, .3),
    0 6px 16px rgba(0, 0, 0, .5),
    0 0 20px rgba(245, 196, 81, .22);
}

/* =======================================================
   九、猫鼠对决 → 厨房瓷砖 + 爪痕
   ======================================================= */
body[data-game="dragon"] .game-body > .card:first-child {
  background:
    repeating-conic-gradient(from 0deg at 0 0,
      rgba(255, 255, 255, .045) 0% 25%,
      transparent 25% 50%) 0 0 / 44px 44px,
    linear-gradient(170deg, rgba(24, 14, 42, .34), rgba(12, 7, 22, .24)) !important;
}

/* =======================================================
   十、骰子 / 食材块：全局立体升级
   ======================================================= */
body.in-game .die {
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .45),
    inset 0 -3px 8px rgba(0, 0, 0, .28),
    0 8px 18px rgba(0, 0, 0, .52);
  transition: transform .2s cubic-bezier(.16, 1, .3, 1);
}
body.in-game .die.pop { animation: jycDiePop .42s cubic-bezier(.16, 1, .3, 1); }
@keyframes jycDiePop {
  0%   { transform: scale(.6) rotate(-16deg); opacity: 0; }
  60%  { transform: scale(1.12) rotate(4deg); opacity: 1; }
  100% { transform: none; }
}

/* =======================================================
   十一、筹码 / 芯片 → 金属压花
   ======================================================= */
body.in-game .chip {
  background: linear-gradient(165deg, rgba(255, 255, 255, .10), rgba(0, 0, 0, .26)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 3px 8px rgba(0, 0, 0, .42);
}
body.in-game .chip.on {
  background: linear-gradient(165deg, #ffe6a3, #d9a02e) !important;
  color: #2a1a08 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 4px 14px rgba(245, 196, 81, .48);
}

/* =======================================================
   十二、移动端 & 无障碍
   ======================================================= */
@media (max-width: 720px) {
  #jyc-backdrop.has-scene .jyc-bd-art { filter: blur(2px) brightness(.66); }
  body.in-game .game-body > .card:first-child { backdrop-filter: blur(6px); }
}
@media (prefers-reduced-motion: reduce) {
  body[data-game="mines"] .mine-cell.bomb,
  body.in-game .die.pop { animation: none !important; }
}