/* ============ 雀魂级动效 CSS ============ */

/* 动效槽 - 铺满桌面 */
.fx-slot {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 140;
  overflow: visible;
}

/* 碰/吃/杠/敲 大字弹出 */
.mj-call-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 150;
}
.mj-call-char {
  font-size: 160px;
  font-family: "STKaiti", "KaiTi", "SimSun", serif;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 20px currentColor, 0 0 40px currentColor, 0 6px 10px rgba(0,0,0,0.5);
  -webkit-text-stroke: 3px rgba(0,0,0,0.4);
  animation: mj-call-pop 1.0s cubic-bezier(.34,1.56,.64,1) forwards;
}
.mj-call-char.pon { color: #fbbf24; }
.mj-call-char.kan { color: #c084fc; }
.mj-call-char.chi { color: #22d3ee; }
.mj-call-char.declare { color: #a855f7; font-size: 140px; }
@keyframes mj-call-pop {
  0% { transform: scale(0) rotate(-30deg); opacity: 0; }
  25% { transform: scale(1.3) rotate(5deg); opacity: 1; }
  40% { transform: scale(1) rotate(0deg); }
  75% { transform: scale(1) rotate(0deg); opacity: 1; }
  100% { transform: scale(2.5) rotate(0deg); opacity: 0; }
}

/* 玩家位置扩散彩色环 */
.mj-ring-burst {
  position: absolute;
  border-radius: 50%;
  border: 3px solid currentColor;
  pointer-events: none;
  z-index: 140;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  animation: mj-ring 0.8s ease-out forwards;
}
@keyframes mj-ring {
  0% { width: 40px; height: 40px; opacity: 1; }
  100% { width: 700px; height: 700px; opacity: 0; }
}

/* 胡牌大横幅 */
.mj-win-banner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 200;
  overflow: hidden;
}
.mj-win-banner-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(251,191,36,0.4), transparent 60%),
    linear-gradient(90deg, transparent, rgba(251,191,36,0.15), transparent);
  animation: mj-win-bg 2.8s ease-out forwards;
}
@keyframes mj-win-bg {
  0% { opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; }
}
.mj-win-text {
  font-size: 130px;
  font-family: "STKaiti", "KaiTi", "SimSun", serif;
  font-weight: 900;
  background: linear-gradient(180deg, #fff8d6 0%, #ffd700 40%, #b8860b 55%, #ffd700 70%, #fff8d6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 4px #8B4513;
  text-shadow:
    0 0 30px rgba(255,215,0,0.9),
    0 0 60px rgba(255,215,0,0.6),
    0 8px 20px rgba(0,0,0,0.5);
  animation: mj-win-text 2.8s cubic-bezier(.34,1.56,.64,1) forwards;
  letter-spacing: 12px;
  padding: 0 20px;
}
@keyframes mj-win-text {
  0% { transform: translateX(140%) scale(0.3) rotate(15deg); opacity: 0; }
  25% { transform: translateX(0) scale(1.1) rotate(0deg); opacity: 1; }
  35% { transform: translateX(0) scale(1) rotate(0deg); }
  80% { transform: translateX(0) scale(1) rotate(0deg); opacity: 1; }
  100% { transform: translateX(0) scale(1.3) rotate(0deg); opacity: 0; }
}
.mj-win-sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%);
  animation: mj-sweep 2.8s ease-out forwards;
  mix-blend-mode: overlay;
}
@keyframes mj-sweep {
  0% { left: -50%; opacity: 0; }
  30% { opacity: 1; }
  70% { opacity: 1; }
  100% { left: 110%; opacity: 0; }
}

/* 撒花礼花 */
.mj-confetti-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 145;
  overflow: hidden;
}
.mj-confetti {
  position: absolute;
  width: 14px;
  height: 18px;
  top: -40px;
  animation: mj-confetti-fall 3.5s ease-out forwards;
}
@keyframes mj-confetti-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(120vh) rotate(1080deg); opacity: 0.2; }
}

/* 计分飞字 */
.mj-score-float {
  position: fixed;
  font-family: "STKaiti", "KaiTi", "SimSun", serif;
  font-weight: 900;
  pointer-events: none;
  z-index: 220;
  white-space: nowrap;
  animation: mj-score-float 2.2s cubic-bezier(.34,1.56,.64,1) forwards;
}
.mj-score-float.positive {
  color: #16a34a;
  text-shadow:
    -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff,
    0 0 12px rgba(22,163,74,0.6);
}
.mj-score-float.negative {
  color: #dc2626;
  text-shadow:
    -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff,
    0 0 12px rgba(220,38,38,0.6);
}
.mj-score-main { font-size: 48px; letter-spacing: 1px; }
.mj-score-sub { font-size: 26px; margin-left: 4px; opacity: 0.9; }
@keyframes mj-score-float {
  0% { transform: translate(-50%, 0) scale(0.3) rotate(-20deg); opacity: 0; }
  15% { transform: translate(-50%, -40px) scale(1.3) rotate(8deg); opacity: 1; }
  25% { transform: translate(-50%, -50px) scale(1) rotate(-3deg); }
  50% { transform: translate(-50%, -70px) scale(1) rotate(2deg); opacity: 1; }
  100% { transform: translate(-50%, -220px) scale(0.6) rotate(0deg); opacity: 0; }
}

/* 胡/放炮震动 */
.board-shake {
  animation: mj-board-shake 0.5s;
}
@keyframes mj-board-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}

/* ============ 开局动画 ============ */
.opening-mask {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.92) 80%);
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease-out;
}
.opening-mask.show { opacity: 1; }
.opening-mask.fade-out { opacity: 0; transition: opacity 0.3s ease-in; }

.opening-title {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 310;
  text-align: center;
  pointer-events: none;
  animation: opening-title-in 0.5s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes opening-title-in {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; filter: blur(20px); }
  60% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; filter: blur(0); }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; filter: blur(0); }
}
.opening-title.fade-out { animation: opening-title-out 0.4s ease-in forwards; }
@keyframes opening-title-out {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }
}
.opening-round {
  font-family: "STKaiti","KaiTi","SimSun",serif;
  font-weight: 900;
  font-size: 84px;
  background: linear-gradient(180deg, #fff8d6 0%, #ffd700 40%, #b8860b 55%, #ffd700 70%, #fff8d6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 3px #8B4513;
  text-shadow: 0 0 30px rgba(255,215,0,0.8), 0 6px 12px rgba(0,0,0,0.5);
  letter-spacing: 10px;
  margin-bottom: 12px;
  line-height: 1;
}
.opening-wind {
  font-family: "STKaiti","KaiTi","SimSun",serif;
  font-weight: 700;
  font-size: 42px;
  color: #fde68a;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8), 0 0 20px rgba(251,191,36,0.5);
  letter-spacing: 12px;
}

/* 庄字徽章 */
.opening-dealer-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fde68a, #f59e0b 60%, #b45309);
  border: 4px solid #fff8d6;
  box-shadow: 0 0 30px rgba(251,191,36,1), 0 4px 12px rgba(0,0,0,0.5);
  color: #7c2d12;
  font-family: "STKaiti","KaiTi","SimSun",serif;
  font-weight: 900;
  font-size: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 320;
  pointer-events: none;
}
.opening-dealer-badge.fly-to-dealer-0 { animation: fly-south 0.8s cubic-bezier(.5,-0.3,.5,1.3) forwards; }
.opening-dealer-badge.fly-to-dealer-1 { animation: fly-east 0.8s cubic-bezier(.5,-0.3,.5,1.3) forwards; }
.opening-dealer-badge.fly-to-dealer-2 { animation: fly-north 0.8s cubic-bezier(.5,-0.3,.5,1.3) forwards; }
.opening-dealer-badge.fly-to-dealer-3 { animation: fly-west 0.8s cubic-bezier(.5,-0.3,.5,1.3) forwards; }

@keyframes fly-south {
  0% { transform: translate(-50%, -50%) scale(0) rotate(-180deg); opacity: 0; }
  30% { transform: translate(-50%, -50%) scale(1.3) rotate(0deg); opacity: 1; }
  70% { transform: translate(-50%, -50%) scale(1) rotate(360deg); opacity: 1; }
  100% { top: 82%; left: 50%; transform: translate(-50%, -50%) scale(0.7) rotate(360deg); opacity: 1; }
}
@keyframes fly-east {
  0% { transform: translate(-50%, -50%) scale(0) rotate(-180deg); opacity: 0; }
  30% { transform: translate(-50%, -50%) scale(1.3) rotate(0deg); opacity: 1; }
  70% { transform: translate(-50%, -50%) scale(1) rotate(360deg); opacity: 1; }
  100% { top: 50%; left: 88%; transform: translate(-50%, -50%) scale(0.7) rotate(360deg); opacity: 1; }
}
@keyframes fly-north {
  0% { transform: translate(-50%, -50%) scale(0) rotate(-180deg); opacity: 0; }
  30% { transform: translate(-50%, -50%) scale(1.3) rotate(0deg); opacity: 1; }
  70% { transform: translate(-50%, -50%) scale(1) rotate(360deg); opacity: 1; }
  100% { top: 18%; left: 50%; transform: translate(-50%, -50%) scale(0.7) rotate(360deg); opacity: 1; }
}
@keyframes fly-west {
  0% { transform: translate(-50%, -50%) scale(0) rotate(-180deg); opacity: 0; }
  30% { transform: translate(-50%, -50%) scale(1.3) rotate(0deg); opacity: 1; }
  70% { transform: translate(-50%, -50%) scale(1) rotate(360deg); opacity: 1; }
  100% { top: 50%; left: 12%; transform: translate(-50%, -50%) scale(0.7) rotate(360deg); opacity: 1; }
}

/* ============ 3D 骰子 ============ */
.dice-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 315;
  width: 240px;
  height: 160px;
  pointer-events: none;
  perspective: 700px;
}
.dice-scene {
  position: absolute;
  width: 80px;
  height: 80px;
  top: 50%;
  margin-top: -40px;
  transform-style: preserve-3d;
}
.dice-scene-1 { left: 30px; }
.dice-scene-2 { right: 30px; }
.dice-scene-1 { animation: dice-fly-1 2.2s cubic-bezier(.25,.6,.4,1.05) forwards; }
.dice-scene-2 { animation: dice-fly-2 2.2s cubic-bezier(.25,.6,.4,1.05) forwards; }

.dice-cube {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
.dice-face {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 80px;
  border-radius: 14px;
  background:
    radial-gradient(ellipse at 28% 22%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 40%),
    linear-gradient(145deg, #ffffff 0%, #f6f6f6 50%, #d6d6d6 100%);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,0.9),
    inset 0 -3px 5px rgba(0,0,0,0.12),
    0 0 0 1.5px rgba(0,0,0,0.25);
}
.dice-face.f1 { transform: translateZ(40px); }
.dice-face.f6 { transform: rotateX(180deg) translateZ(40px); }
.dice-face.f2 { transform: rotateY(90deg)  translateZ(40px); }
.dice-face.f5 { transform: rotateY(-90deg) translateZ(40px); }
.dice-face.f3 { transform: rotateX(-90deg) translateZ(40px); }
.dice-face.f4 { transform: rotateX(90deg)  translateZ(40px); }

@keyframes dice-fly-1 {
  0% { opacity: 0; transform: translate3d(180px, -240px, 0); }
  15% { opacity: 1; }
  25% { transform: translate3d(20px, 50px, 0); }
  38% { transform: translate3d(-5px, -30px, 0); }
  52% { transform: translate3d(-15px, 25px, 0); }
  65% { transform: translate3d(-10px, -8px, 0); }
  78% { transform: translate3d(-5px, 5px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes dice-fly-2 {
  0% { opacity: 0; transform: translate3d(-180px, -220px, 0); }
  15% { opacity: 1; }
  22% { transform: translate3d(-20px, 40px, 0); }
  35% { transform: translate3d(10px, -25px, 0); }
  50% { transform: translate3d(18px, 30px, 0); }
  65% { transform: translate3d(12px, -5px, 0); }
  78% { transform: translate3d(5px, 3px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

.dice-cube.rolling-1 { animation: cube-roll-1 2.0s cubic-bezier(.5,.2,.5,1) forwards; }
.dice-cube.rolling-2 { animation: cube-roll-2 2.0s cubic-bezier(.5,.2,.5,1) forwards; }

@keyframes cube-roll-1 {
  0%   { transform: rotateX(0)    rotateY(0)    rotateZ(0); }
  15%  { transform: rotateX(360deg) rotateY(270deg) rotateZ(90deg); }
  30%  { transform: rotateX(540deg) rotateY(450deg) rotateZ(160deg); }
  45%  { transform: rotateX(720deg) rotateY(630deg) rotateZ(230deg); }
  60%  { transform: rotateX(830deg) rotateY(760deg) rotateZ(275deg); }
  78%  { transform: rotateX(900deg) rotateY(870deg) rotateZ(310deg); }
  100% {
    transform: rotateX(calc(720deg + var(--final-rx, 0deg)))
               rotateY(calc(720deg + var(--final-ry, 0deg)))
               rotateZ(0);
  }
}
@keyframes cube-roll-2 {
  0%   { transform: rotateX(0)    rotateY(0)    rotateZ(0); }
  15%  { transform: rotateX(-340deg) rotateY(-250deg) rotateZ(-80deg); }
  30%  { transform: rotateX(-500deg) rotateY(-400deg) rotateZ(-140deg); }
  45%  { transform: rotateX(-700deg) rotateY(-570deg) rotateZ(-210deg); }
  60%  { transform: rotateX(-810deg) rotateY(-700deg) rotateZ(-250deg); }
  78%  { transform: rotateX(-880deg) rotateY(-800deg) rotateZ(-290deg); }
  100% {
    transform: rotateX(calc(-720deg + var(--final-rx, 0deg)))
               rotateY(calc(-720deg + var(--final-ry, 0deg)))
               rotateZ(0);
  }
}

.dice-pip {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #3a3a3a 0%, #111 60%, #000 100%);
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.7), inset 0 -1px 1px rgba(255,255,255,0.2);
  transform: translate(-50%, -50%);
}
.dice-pip.red {
  background: radial-gradient(circle at 35% 35%, #ef4444 0%, #c81818 60%, #900 100%);
  box-shadow: inset 0 2px 3px rgba(120,0,0,0.6), 0 0 4px rgba(220,40,40,0.5);
}
.dice-wrap.show-result .dice-scene { animation-play-state: paused; }
.dice-wrap.show-result .dice-scene::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 22px;
  box-shadow: 0 0 40px 10px rgba(255,215,0,0.9), 0 0 80px 18px rgba(255,215,0,0.4);
  animation: dice-glow 1.3s ease-in-out;
  pointer-events: none;
}
@keyframes dice-glow {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}
.dice-wrap.fade-out { opacity: 0; transition: opacity 0.4s; }

/* 开宝横幅 */
.bao-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 315;
  background: radial-gradient(ellipse at center, #dc2626 0%, #991b1b 70%, #7c1515 100%);
  border: 3px solid #fde047;
  border-radius: 16px;
  padding: 24px 48px;
  text-align: center;
  box-shadow: 0 0 50px rgba(253,224,71,0.9), 0 10px 30px rgba(0,0,0,0.7);
  animation: bao-banner-in 0.5s cubic-bezier(.34,1.56,.64,1) forwards;
  pointer-events: none;
}
@keyframes bao-banner-in {
  0% { transform: translate(-50%, -50%) scale(0) rotate(-30deg); opacity: 0; }
  60% { transform: translate(-50%, -50%) scale(1.15) rotate(5deg); }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; }
}
.bao-banner.fade-out { animation: bao-banner-out 0.4s ease-in forwards; }
@keyframes bao-banner-out {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }
}
.bao-dice-small { font-size: 18px; color: #fde047; margin-bottom: 10px; letter-spacing: 6px; }
.bao-title {
  font-size: 52px;
  font-weight: 900;
  font-family: "STKaiti","KaiTi","SimSun",serif;
  background: linear-gradient(180deg, #fff8d6 0%, #ffd700 40%, #b8860b 55%, #ffd700 70%, #fff8d6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 2px #7c1515;
  text-shadow: 0 0 20px rgba(255,215,0,1);
  margin-bottom: 10px;
  letter-spacing: 8px;
}
.bao-subtitle { font-size: 18px; color: #fde047; font-weight: 600; }