/* =========================================================
   JYC 鼠界 · 游戏内舞台层 jyc-stage.css
   ---------------------------------------------------------
   目标：把「进游戏 = 白墙」变成「进游戏 = 沉浸舞台」。
   1) #jyc-backdrop  全屏景深背景（该玩法卡面 + 地下赌厅氛围底图）
   2) .jyc-stage     电影级横幅（卡面 + 光扫 + 世界观格言）
   3) 游戏内卡片玻璃化 / 金边 / 微光
   4) 骰面、格子、门、地砖的鼠族质感重塑
   全部为 CSS，零新增图片体积（仅复用已有卡面 + 1 张氛围底图）
   ========================================================= */

/* ---------- 1. 全屏景深背景 ---------- */
#jyc-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  animation: jycBdIn .9s ease forwards;
}
@keyframes jycBdIn { to { opacity: 1; } }

#jyc-backdrop .jyc-bd-art {
  position: absolute;
  inset: -8%;
  width: 116%;
  height: 116%;
  object-fit: cover;
  /* 回退态（无专属场景图）：重模糊，只当色块用 */
  filter: blur(38px) saturate(1.25) brightness(.62);
  transform: scale(1.06);
  animation: jycBdDrift 34s ease-in-out infinite alternate;
}

/* 有专属环境场景图 → 轻模糊，让粮仓/地窖/阁楼的结构真正被看见 */
#jyc-backdrop.has-scene .jyc-bd-art {
  filter: blur(2.5px) saturate(1.18) brightness(.72) contrast(1.08);
}
@keyframes jycBdDrift {
  from { transform: scale(1.06) translate3d(-1.4%, -1%, 0); }
  to   { transform: scale(1.14) translate3d(1.4%, 1%, 0); }
}

/* 地下赌厅氛围底图：叠在模糊卡面之上，统一全站质感 */
#jyc-backdrop .jyc-bd-hall {
  position: absolute;
  inset: 0;
  background: url('../images/stage-bg.png') center 30% / cover no-repeat;
  opacity: .34;
  mix-blend-mode: screen;
}

/* 暗化面纱：保证前景 UI 始终可读 */
#jyc-backdrop .jyc-bd-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(168, 85, 247, .22), transparent 58%),
    radial-gradient(ellipse at 50% 100%, rgba(11, 7, 19, .96), transparent 62%),
    linear-gradient(180deg, rgba(11, 7, 19, .70) 0%, rgba(11, 7, 19, .86) 42%, rgba(11, 7, 19, .95) 100%);
}

/* 有专属场景时，面纱减轻并改为暗角式，让环境结构透出来 */
#jyc-backdrop.has-scene .jyc-bd-veil {
  background:
    radial-gradient(ellipse at 50% 30%, transparent 14%, rgba(11, 7, 19, .26) 60%, rgba(11, 7, 19, .74) 100%),
    linear-gradient(180deg, rgba(11, 7, 19, .22) 0%, rgba(11, 7, 19, .40) 38%, rgba(11, 7, 19, .84) 100%),
    linear-gradient(90deg, rgba(11, 7, 19, .42) 0%, transparent 26%, transparent 74%, rgba(11, 7, 19, .42) 100%);
}

/* 漂浮尘埃粒子（纯 CSS，无图） */
#jyc-backdrop .jyc-bd-dust {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 12% 22%, rgba(245, 196, 81, .55), transparent),
    radial-gradient(1.6px 1.6px at 34% 68%, rgba(255, 255, 255, .40), transparent),
    radial-gradient(2.2px 2.2px at 58% 14%, rgba(245, 196, 81, .38), transparent),
    radial-gradient(1.4px 1.4px at 76% 52%, rgba(216, 180, 254, .48), transparent),
    radial-gradient(2px 2px at 88% 80%, rgba(245, 196, 81, .30), transparent),
    radial-gradient(1.6px 1.6px at 22% 88%, rgba(255, 255, 255, .28), transparent);
  animation: jycDust 18s linear infinite;
}
@keyframes jycDust {
  from { transform: translate3d(0, 0, 0); opacity: .85; }
  50%  { opacity: .45; }
  to   { transform: translate3d(0, -46px, 0); opacity: .85; }
}

/* 进入游戏时，主内容浮在背景之上 */
body.in-game #app,
body.in-game .topbar,
body.in-game .bottom-nav { position: relative; z-index: 2; }

/* ---------- 2. 电影级舞台横幅 ---------- */
.jyc-stage {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 14px;
  aspect-ratio: 21 / 8;
  max-height: 260px;
  border: 1px solid rgba(245, 196, 81, .34);
  box-shadow:
    0 18px 46px rgba(0, 0, 0, .58),
    inset 0 0 0 1px rgba(255, 255, 255, .05);
  animation: jycStageIn .62s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes jycStageIn {
  from { opacity: 0; transform: translateY(-14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.jyc-stage .jyc-stage-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  transform: scale(1.03);
  animation: jycKenBurns 26s ease-in-out infinite alternate;
}
@keyframes jycKenBurns {
  from { transform: scale(1.03) translate3d(0, 0, 0); }
  to   { transform: scale(1.13) translate3d(-1.6%, -2%, 0); }
}

.jyc-stage .jyc-stage-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(11, 7, 19, .92) 0%, rgba(11, 7, 19, .70) 38%, rgba(11, 7, 19, .12) 72%, rgba(11, 7, 19, .38) 100%),
    linear-gradient(0deg, rgba(11, 7, 19, .88) 0%, transparent 58%);
}

/* 金色光扫，每隔一段时间掠过一次 */
.jyc-stage .jyc-stage-sweep {
  position: absolute;
  top: -60%;
  left: -40%;
  width: 32%;
  height: 220%;
  background: linear-gradient(100deg, transparent, rgba(245, 196, 81, .20), rgba(255, 255, 255, .34), rgba(245, 196, 81, .18), transparent);
  transform: rotate(14deg);
  animation: jycSweep 7.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes jycSweep {
  0%, 62% { left: -40%; opacity: 0; }
  66%     { opacity: 1; }
  92%     { left: 118%; opacity: 0; }
  100%    { left: 118%; opacity: 0; }
}

.jyc-stage .jyc-stage-txt {
  position: absolute;
  left: 22px;
  bottom: 16px;
  right: 22px;
  z-index: 2;
}
.jyc-stage .jyc-stage-cat {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #f5c451;
  background: rgba(11, 7, 19, .62);
  border: 1px solid rgba(245, 196, 81, .42);
  border-radius: 999px;
  padding: 3px 11px;
  margin-bottom: 8px;
  backdrop-filter: blur(6px);
}
.jyc-stage .jyc-stage-en {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: .05em;
  line-height: 1.15;
  background: linear-gradient(96deg, #fff6dc 8%, #f5c451 48%, #d8b4fe 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .5);
}
.jyc-stage .jyc-stage-story {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-style: italic;
  color: rgba(255, 255, 255, .80);
  border-left: 2px solid rgba(245, 196, 81, .70);
  padding-left: 9px;
  max-width: 62%;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .7);
}

/* 右下角赔率徽标 */
.jyc-stage .jyc-stage-odds {
  position: absolute;
  right: 18px;
  top: 16px;
  z-index: 2;
  font-size: 11px;
  font-weight: 700;
  color: #0b0713;
  background: linear-gradient(135deg, #ffe6a3, #f5c451);
  border-radius: 999px;
  padding: 5px 13px;
  box-shadow: 0 6px 18px rgba(245, 196, 81, .34);
}

/* ---------- 3. 游戏内卡片玻璃化升级 ---------- */
body.in-game .game-head {
  background: linear-gradient(120deg, rgba(30, 18, 52, .74), rgba(17, 10, 30, .62));
  border: 1px solid rgba(168, 85, 247, .26);
  border-radius: 16px;
  padding: 11px 14px;
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .38);
}
body.in-game .game-head .gc-icon {
  box-shadow: 0 0 0 1px rgba(245, 196, 81, .36), 0 0 22px rgba(245, 196, 81, .22);
  border-radius: 12px;
}
body.in-game .game-head h2 {
  background: linear-gradient(96deg, #fff6dc, #f5c451);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

body.in-game .card {
  background: linear-gradient(160deg, rgba(28, 17, 48, .60), rgba(15, 9, 27, .50)) !important;
  border: 1px solid rgba(168, 85, 247, .28) !important;
  backdrop-filter: blur(20px) saturate(1.15);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .42);
  position: relative;
  overflow: hidden;
}
/* 卡片顶部一条金色细光 */
body.in-game .card::before {
  content: '';
  position: absolute;
  top: 0; left: 12%;
  width: 76%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 196, 81, .58), transparent);
}
body.in-game .card-h {
  border-bottom: 1px solid rgba(168, 85, 247, .18);
}
body.in-game .card-h i { color: #f5c451; }

/* ---------- 4. 骰面 / 格子 / 门 / 地砖 质感重塑 ---------- */
body.in-game .die,
body.in-game .dice,
body.in-game .roll-display {
  filter: drop-shadow(0 8px 20px rgba(245, 196, 81, .22));
}

/* 六格粮仓 / 通用可点格子：奶酪黄边 + 悬浮抬升 */
body.in-game .grid-cell,
body.in-game .bet-cell,
body.in-game .sb-cell {
  transition: transform .18s cubic-bezier(.16, 1, .3, 1), box-shadow .18s ease, border-color .18s ease;
}
body.in-game .grid-cell:hover,
body.in-game .bet-cell:hover,
body.in-game .sb-cell:hover {
  transform: translateY(-3px);
  border-color: rgba(245, 196, 81, .6);
  box-shadow: 0 10px 24px rgba(245, 196, 81, .18);
}

/* 地窖地砖：石板质感 */
body.in-game .mine-cell {
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .07), transparent 60%),
    linear-gradient(150deg, #2a1c44, #170e2a) !important;
  border: 1px solid rgba(168, 85, 247, .26) !important;
  transition: transform .15s ease, box-shadow .15s ease;
}
body.in-game .mine-cell:not(:disabled):hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 18px rgba(245, 196, 81, .22);
  border-color: rgba(245, 196, 81, .55) !important;
}
body.in-game .mine-cell.gem {
  background: radial-gradient(circle at 40% 32%, #ffe9a8, #e0a83c) !important;
  box-shadow: 0 0 22px rgba(245, 196, 81, .5);
}
body.in-game .mine-cell.bomb {
  background: radial-gradient(circle at 40% 32%, #ff9a9a, #7f1414) !important;
  box-shadow: 0 0 22px rgba(239, 68, 68, .5);
}

/* 阁楼门 */
body.in-game .door {
  transition: transform .16s ease, box-shadow .16s ease;
}
body.in-game .tower-row.active .door:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 20px rgba(245, 196, 81, .28);
}
body.in-game .tower-row.active {
  background: linear-gradient(90deg, rgba(245, 196, 81, .12), transparent 70%);
  border-radius: 12px;
}

/* 结算横幅：金框 + 呼吸光 */
body.in-game .result-banner {
  border-radius: 14px;
  backdrop-filter: blur(10px);
  animation: jycBannerPop .38s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes jycBannerPop {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
body.in-game .result-banner.w {
  box-shadow: 0 0 0 1px rgba(245, 196, 81, .42), 0 10px 30px rgba(245, 196, 81, .16);
}
body.in-game .result-banner.l {
  box-shadow: 0 0 0 1px rgba(239, 68, 68, .35), 0 10px 30px rgba(239, 68, 68, .12);
}

/* 主行动按钮：金属光泽 + 光扫 */
body.in-game .btn-gold.btn-lg {
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(245, 196, 81, .30);
}
body.in-game .btn-gold.btn-lg::after {
  content: '';
  position: absolute;
  top: -50%; left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: rotate(16deg);
  animation: jycBtnSweep 3.6s ease-in-out infinite;
}
@keyframes jycBtnSweep {
  0%, 58% { left: -60%; }
  88%, 100% { left: 130%; }
}

/* 返回按钮 */
body.in-game #back-lobby {
  backdrop-filter: blur(10px);
  background: rgba(28, 17, 48, .62);
  border: 1px solid rgba(168, 85, 247, .3);
}

/* ---------- 5. 响应式 ---------- */
@media (max-width: 720px) {
  .jyc-stage { aspect-ratio: 16 / 9; max-height: 190px; }
  .jyc-stage .jyc-stage-en { font-size: 16px; }
  .jyc-stage .jyc-stage-story { max-width: 100%; font-size: 11px; }
  .jyc-stage .jyc-stage-odds { font-size: 10px; padding: 4px 10px; }
  #jyc-backdrop .jyc-bd-art { filter: blur(30px) brightness(.58); }
}

/* 英文模式：标题更长，缩一点 */
html[lang="en"] .jyc-stage .jyc-stage-en { font-size: 19px; }
html[lang="en"] .jyc-stage .jyc-stage-story { font-size: 11.5px; max-width: 68%; }

/* 尊重「减少动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
  #jyc-backdrop .jyc-bd-art,
  #jyc-backdrop .jyc-bd-dust,
  .jyc-stage .jyc-stage-art,
  .jyc-stage .jyc-stage-sweep,
  body.in-game .btn-gold.btn-lg::after { animation: none !important; }
}