/*
 * 福州麻将牌桌升级：绿色台呢、中间方位盘和倒计时、出牌放大、摸牌滑入、特效大字、立体圆按钮、结算面板。
 * 放在 mj.css 后面加载，覆盖其中的基础样式。
 */

/* 绿色台呢（麻将玩家看惯了、眼睛舒服），四周一圈青 + 粉霓虹双线，和全站风格一致 */
.mjtable {
  margin: 2px 4px 4px; border-radius: 18px;
  background:
    radial-gradient(ellipse 60% 55% at 50% 46%, rgba(255, 255, 255, .07), transparent 70%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .018) 0 2px, transparent 2px 6px),
    radial-gradient(ellipse at 50% 45%, #1f8a5c 0%, #136b45 50%, #0b4a30 100%);
  box-shadow: inset 0 0 0 1.5px rgba(122, 243, 255, .7), inset 0 0 0 4px rgba(10, 30, 26, .6), inset 0 0 0 5px rgba(255, 79, 192, .45), inset 0 0 30px rgba(0, 0, 0, .55),
    0 0 14px rgba(122, 243, 255, .25), 0 0 26px rgba(255, 79, 192, .18);
}
.mjtable.frozen .mjme, .mjtable.frozen .mjopp, .mjtable.frozen .mjmid, .mjtable.frozen .mjmeinfo { filter: brightness(.7); }
.mjtable.resultbg { display: flex; align-items: center; justify-content: center; }

.mjhint { padding: 1px 8px; border-radius: 999px; background: rgba(0, 0, 0, .3); }

.mjcompass {
  --cs: calc(var(--tw) * 1.55 + 10px);
  position: relative; width: var(--cs); height: var(--cs); flex: none;
  background: radial-gradient(circle, #343846 0%, #1c1f29 70%);
  box-shadow: inset 0 0 0 2px #4b5163, inset 0 0 12px rgba(0, 0, 0, .7);
  clip-path: polygon(22% 0, 78% 0, 100% 22%, 100% 78%, 78% 100%, 22% 100%, 0 78%, 0 22%);
}
.mjseg { position: absolute; font-size: calc(var(--cs) * .17); font-weight: 900; color: #8d93a6; line-height: 1; display: flex; align-items: center; justify-content: center; }
.mjseg.bottom { left: 22%; right: 22%; bottom: 0; height: 24%; }
.mjseg.top { left: 22%; right: 22%; top: 0; height: 24%; }
.mjseg.left { top: 22%; bottom: 22%; left: 0; width: 24%; }
.mjseg.right { top: 22%; bottom: 22%; right: 0; width: 24%; }
.mjseg.on { color: #fff; text-shadow: 0 0 6px #fff; animation: mjSeg 1s ease-in-out infinite alternate; }
.mjseg.bottom.on { background: linear-gradient(0deg, rgba(64, 160, 255, .95), rgba(64, 160, 255, .15)); }
.mjseg.top.on { background: linear-gradient(180deg, rgba(64, 160, 255, .95), rgba(64, 160, 255, .15)); }
.mjseg.left.on { background: linear-gradient(90deg, rgba(64, 160, 255, .95), rgba(64, 160, 255, .15)); }
.mjseg.right.on { background: linear-gradient(270deg, rgba(64, 160, 255, .95), rgba(64, 160, 255, .15)); }
@keyframes mjSeg { to { filter: brightness(1.35); } }
.mjclock {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 900 calc(var(--cs) * .3) / 1 Consolas, 'Courier New', monospace;
  color: #6fd3ff; text-shadow: 0 0 6px #2ea8ff, 0 0 12px rgba(46, 168, 255, .6); letter-spacing: 1px;
}
.mjclock.urgent { color: #ff6b6b; text-shadow: 0 0 6px #ff3b3b; animation: mjUrgent .5s steps(2) infinite; }
@keyframes mjUrgent { 50% { opacity: .45; } }

/* 刚打出的牌：在出牌人那一边放大亮一下 */
.mt.big { --w: calc(var(--tw, 40px) * 1.3); }
.mjbig { position: absolute; z-index: 7; pointer-events: none; transform: translate(-50%, -50%); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55)) drop-shadow(0 0 10px rgba(255, 215, 106, .55)); }
.mjbig.bottom { left: 50%; top: 64%; }
.mjbig.top { left: 50%; top: 30%; }
.mjbig.left { left: 27%; top: 46%; }
.mjbig.right { left: 73%; top: 46%; }
@keyframes mjShow {
  0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; }
  14% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
  24% { transform: translate(-50%, -50%) scale(1); }
  78% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(.5); opacity: 0; }
}

/* 摸牌：从右上方转着滑进来 */
@keyframes mjDrawIn {
  0% { transform: translate(70%, -90%) rotate(16deg); opacity: 0; }
  60% { transform: translate(-4%, 4%) rotate(-2deg); opacity: 1; }
  100% { transform: none; opacity: 1; }
}

/* 特效大字：碰 / 吃 / 杠 / 花 / 听金坎 / 自摸 / 胡 / 流局 */
.mjfxlayer { position: absolute; inset: 0; z-index: 20; pointer-events: none; overflow: hidden; border-radius: inherit; }
.mjfx { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; }
.mjfx.bottom { left: 50%; top: 60%; }
.mjfx.top { left: 50%; top: 24%; }
.mjfx.left { left: 22%; top: 42%; }
.mjfx.right { left: 78%; top: 42%; }
.mjfx.center { left: 50%; top: 46%; }
.mjfx b {
  font: 900 calc(var(--gh, 352px) * .14) / 1 STKaiti, KaiTi, 'Kaiti SC', 'Noto Serif CJK SC', serif; letter-spacing: 4px; white-space: nowrap;
  background: linear-gradient(#fffbe0, #ffd34d 45%, #ff8a1a); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #7a1d00) drop-shadow(0 0 14px rgba(255, 184, 0, .9));
}
.mjfx.center b { font-size: calc(var(--gh, 352px) * .24); }
.mjfx small { margin-top: 4px; padding: 2px 12px; border-radius: 999px; font-size: 14px; font-weight: 900; color: #fff; background: linear-gradient(90deg, rgba(255, 79, 160, .95), rgba(255, 154, 60, .95)); box-shadow: 0 0 14px rgba(255, 90, 210, .7); }
.mjfx.hu b { background: linear-gradient(#fff, #ffd0d0 30%, #ff4040 65%, #b8001e); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 3px 0 #4a0010) drop-shadow(0 0 18px rgba(255, 60, 60, .95)); }
.mjfx.chi b { background: linear-gradient(#f2fff2, #7dff9a 45%, #1fa83a); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 3px 0 #0a3d18) drop-shadow(0 0 12px rgba(80, 255, 120, .8)); }
.mjfx.gang b { background: linear-gradient(#f4ecff, #c39bff 45%, #7a3cff); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 3px 0 #2a0a5a) drop-shadow(0 0 14px rgba(160, 100, 255, .9)); }
.mjfx.flower b { font-size: calc(var(--gh, 352px) * .12); background: linear-gradient(#fff, #ffd1ec 40%, #ff5ad2); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 2px 0 #5a0040) drop-shadow(0 0 12px rgba(255, 90, 210, .9)); }
.mjfx.flower small { font-size: 11px; padding: 1px 8px; }
.mjfx.draw b { background: linear-gradient(#fff, #c9c4dd 50%, #8a84a8); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 3px 0 #2a2640); }
.mjspark {
  position: absolute; left: 50%; top: 40%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #fff;
  box-shadow: 40px -20px 0 -2px #ffd34d, -46px -12px 0 -3px #fff, 30px 26px 0 -3px #ff9ad5, -34px 24px 0 -2px #ffd34d, 0 -40px 0 -3px #fff, 58px 6px 0 -4px #7af3ff, -60px 2px 0 -4px #ffd34d;
  animation: mjSpark 1.2s ease-out both; opacity: 0;
}
@keyframes mjSpark { 0% { transform: scale(.2); opacity: 0; } 20% { opacity: 1; } 100% { transform: scale(2.2) rotate(40deg); opacity: 0; } }
@keyframes mjFxPop {
  0% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
  12% { transform: translate(-50%, -50%) scale(.9); opacity: 1; }
  20% { transform: translate(-50%, -50%) scale(1.06); }
  28% { transform: translate(-50%, -50%) scale(1); }
  80% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -62%) scale(1.04); opacity: 0; }
}

/*
 * 操作按钮（统一成自己的霓虹风）：深色玻璃圆 + 各自颜色的霓虹圈，楷体字发光。
 * 碰 / 吃 金、杠 紫、金坎 金（虚线圈）、过 青；胡 是唯一实心的（红金发光，会轻轻呼吸），一眼就能看到。
 */
.mjbtn {
  --n: #ffd34d; --ng: rgba(255, 211, 77, .5);
  --bs: max(48px, calc(var(--tw) * 1.35)); width: var(--bs); height: var(--bs); min-width: 0; padding: 0; border-radius: 50%; justify-content: center;
  font-size: calc(var(--bs) * .44); letter-spacing: 0; position: relative; animation: none; color: #fff;
  background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .14), transparent 60%), linear-gradient(rgba(34, 16, 74, .95), rgba(12, 4, 34, .95));
  border: 2px solid var(--n); text-shadow: 0 0 6px var(--n), 0 0 14px var(--ng);
  box-shadow: 0 0 10px var(--ng), 0 0 22px var(--ng), inset 0 0 12px var(--ng), 0 5px 12px rgba(0, 0, 0, .45);
}
.mjbtn b { font-family: STKaiti, KaiTi, 'Kaiti SC', 'Noto Serif CJK SC', serif; font-weight: 900; }
.mjbtn.wide, .mjbtn.pill { width: auto; padding: 0 calc(var(--bs) * .32); border-radius: calc(var(--bs) / 2); font-size: calc(var(--bs) * .38); gap: 3px; }
/* mj.css 里 .mjbtn.peng 这些还有旧的实心底色，这里每种都把底色、阴影重新写一遍盖掉 */
.mjbtn.peng, .mjbtn.chi, .mjbtn.gang, .mjbtn.jinkan, .mjbtn.pass {
  color: #fff; background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .14), transparent 60%), linear-gradient(rgba(34, 16, 74, .95), rgba(12, 4, 34, .95));
  text-shadow: 0 0 6px var(--n), 0 0 14px var(--ng); box-shadow: 0 0 10px var(--ng), 0 0 22px var(--ng), inset 0 0 12px var(--ng), 0 5px 12px rgba(0, 0, 0, .45); }
.mjbtn.peng, .mjbtn.chi { --n: #ffd34d; --ng: rgba(255, 211, 77, .5); }
.mjbtn.gang { --n: #c08bff; --ng: rgba(177, 120, 255, .55); }
.mjbtn.jinkan { --n: #ffd34d; --ng: rgba(255, 211, 77, .5); border-style: dashed; }
.mjbtn.pass { --n: #7af3ff; --ng: rgba(122, 243, 255, .45); --bs: max(40px, calc(var(--tw) * 1.1)); }
.mjbtn.hu { --n: #ffd34d; --ng: rgba(255, 70, 70, .8); color: #fff7d0; border-color: #ffe08a;
  background: radial-gradient(circle at 50% 30%, #ff9a7a 0%, #ff3b5c 45%, #b5002a 100%); text-shadow: 0 1px 2px rgba(90, 0, 20, .7), 0 0 10px rgba(255, 240, 200, .8);
  box-shadow: 0 0 0 3px rgba(255, 215, 106, .55), 0 0 18px rgba(255, 60, 80, .9), 0 0 34px rgba(255, 180, 60, .5), 0 5px 12px rgba(0, 0, 0, .45);
  animation: mjHuGlow 1.1s ease-in-out infinite alternate; }
@keyframes mjHuGlow { to { box-shadow: 0 0 0 3px rgba(255, 215, 106, .85), 0 0 26px rgba(255, 60, 80, 1), 0 0 46px rgba(255, 180, 60, .7), 0 5px 12px rgba(0, 0, 0, .45); } }
.mjbtn.on { outline: 3px solid #fff; outline-offset: 2px; }
.mjbtn:active { transform: translateY(2px) scale(.96); }
@keyframes mjBtnPop { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* ---------- 结算面板 ---------- */
.mjrpanel {
  width: min(96%, 900px); max-height: 96%; overflow: auto; padding: 8px 12px 10px; border-radius: 18px;
  background: linear-gradient(rgba(52, 20, 110, .96), rgba(22, 8, 52, .97)); border: 1.5px solid rgba(255, 215, 106, .65);
  box-shadow: 0 0 30px rgba(255, 184, 0, .25), 0 10px 30px rgba(0, 0, 0, .6);
}
@keyframes mjPanelIn { 0% { transform: translateY(30px) scale(.9); opacity: 0; } 100% { transform: none; opacity: 1; } }
.mjrhead { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.mjrtitle { font: 900 26px/1 STKaiti, KaiTi, 'Kaiti SC', serif; letter-spacing: 3px;
  background: linear-gradient(#fff, #ffd34d 50%, #ff8a1a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 #6a1a00); }
.mjrtitle.draw { background: linear-gradient(#fff, #b8b2d0); -webkit-background-clip: text; background-clip: text; }
.mjrno { font-size: 12px; color: var(--muted); }
.mjrgold { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; color: #ffd76a; }
.mjrrows { display: flex; flex-direction: column; gap: 5px; }
.mjround .mjrrow { grid-template-columns: 128px 1fr auto auto; padding: 5px 10px; background: rgba(255, 255, 255, .05); }
.mjround .mjrrow.me { background: rgba(255, 215, 106, .08); }
.mjround .mjrrow.win { background: linear-gradient(90deg, rgba(255, 184, 0, .22), rgba(255, 79, 160, .1)); border-color: #ffd76a; }
.mjrwho > div { min-width: 0; }
.mjrhow { font-size: 11px; color: #ffe9b0; line-height: 1.3; }
.mjrhow b { color: #ffd34d; }
.mjround .mjrtiles { display: block; --tw: 34px; }
.mjrline { display: flex; align-items: flex-end; gap: 4px; flex-wrap: wrap; }
.mjrwin { margin-left: 6px; display: inline-flex; }
.mjrwin .mt { outline: 2px solid #ff4fa0; outline-offset: 1px; }
.mjrflrow { display: flex; gap: 1px; flex-wrap: wrap; margin-top: 3px; }
.mjrparts { display: flex; flex-direction: column; font-size: 11px; color: #d6ccf2; line-height: 1.35; text-align: right; }
.mjround .mjrscore { font-size: 22px; font-weight: 900; }
.mjrformula { margin-top: 6px; font-size: 11px; color: var(--muted); }
.mjround .mjrbar { justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0 0; }
.short .mjround .mjrrow { grid-template-columns: 96px 1fr auto auto; padding: 3px 6px; }
.short .mjround .mjrtiles { --tw: 26px; }
.short .mjrtitle { font-size: 20px; }
.short .mjround .mjrscore { font-size: 17px; }
.sheet .mjround .mjrtiles { --tw: 26px; }

/* 结算面板在矮屏上压紧：一屏放得下 4 个人 + 按钮 */
.mjrhow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 结算里名字后面的玩家 ID */
.mjrid { display: block; font-style: normal; font-size: 10px; line-height: 1.2; color: var(--muted); font-variant-numeric: tabular-nums; }
.mjround .mjrwho b { display: inline-block; max-width: 80px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.short .mjrpanel { padding: 5px 10px 6px; max-height: 98%; }
.short .mjrhead { margin-bottom: 3px; }
.short .mjrrows { gap: 3px; }
.short .mjround .mjrrow { grid-template-columns: 112px 1fr auto auto; padding: 2px 8px; gap: 6px; }
.short .mjround .mjrtiles { --tw: 24px; }
.short .mjrparts { font-size: 10px; line-height: 1.2; }
.short .mjrformula { margin-top: 3px; font-size: 10px; }
.short .mjround .mjrbar { padding-top: 4px; }
.short .mjround .mjrbar .btn { padding-top: 5px; padding-bottom: 5px; }

/* ---------- 方位盘：四边都标风位，中间是剩余张数（麻将不限时，2026-10-18 改） ---------- */
.mjseg.empty { color: #555b6b; }
.mjclock { display: flex; flex-direction: column; align-items: center; font-size: inherit; letter-spacing: 0; }
.mjclock b { font: 900 calc(var(--cs) * .26) / 1 Consolas, 'Courier New', monospace; }
.mjclock span { font: 700 calc(var(--cs) * .1) / 1.1 sans-serif; color: #9fdcff; text-shadow: none; }

/* ---------- 补花：花牌先在自己牌堆旁亮出来，再飞进花牌堆（位置由 mj.js 量好写进 --x0/--y0/--x1/--y1） ---------- */
.mjfly { position: absolute; left: 0; top: 0; z-index: 3; transform-origin: 50% 50%; opacity: 0; }
.mt.flyhide { visibility: hidden; }
@keyframes mjFly {
  0% { opacity: 0; transform: translate(var(--x0), var(--y0)) scale(calc(var(--s0, 1) * .3)); }
  14% { opacity: 1; transform: translate(var(--x0), calc(var(--y0) - 14px)) scale(calc(var(--s0, 1) * 1.15)); filter: drop-shadow(0 0 8px rgba(255, 120, 200, .95)); }
  24%, 52% { opacity: 1; transform: translate(var(--x0), calc(var(--y0) - 10px)) scale(var(--s0, 1)); filter: drop-shadow(0 0 6px rgba(255, 120, 200, .8)); }
  100% { opacity: 1; transform: translate(var(--x1), var(--y1)) scale(var(--s1, .5)); filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .45)); }
}

/*
 * 操作按钮动起来（2026-10-21 用户：麻将吃碰那些按钮做成动画的）：
 *   弹出时转着蹦出来；之后一圈光圈不停往外扩、一道高光隔一会儿扫过去；胡 的光圈更快、字左右晃。
 *   --ph 是 mj.js 按时间算的负 delay，重绘时接着播，不会一闪一闪从头来。
 */
@keyframes mjBtnPop {
  0% { transform: translateY(26px) scale(.2) rotate(-25deg); opacity: 0; }
  60% { transform: translateY(-4px) scale(1.12) rotate(6deg); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
.mjacts .mjbtn::before {
  content: ''; position: absolute; inset: -3px; border-radius: inherit; pointer-events: none;
  border: 3px solid var(--n); box-shadow: 0 0 10px var(--n), inset 0 0 8px var(--n); opacity: 0;
  animation: mjRipple 2.4s ease-out var(--ph, 0ms) infinite;
}
@keyframes mjRipple { 0% { transform: scale(1); opacity: .9; } 45% { transform: scale(1.38); opacity: 0; } 100% { transform: scale(1.38); opacity: 0; } }
.mjacts .mjbtn::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%) no-repeat;
  background-size: 260% 100%; background-position: 160% 0;
  animation: mjShine 2.4s ease-in-out var(--ph, 0ms) infinite;
}
@keyframes mjShine { 0%, 50% { background-position: 160% 0; } 80%, 100% { background-position: -60% 0; } }
.mjacts .mjbtn > b { display: inline-block; }
.mjacts .mjbtn.hu::before { border-width: 3px; border-color: #ffe08a; animation-duration: 1.2s; }
.mjacts .mjbtn.hu > b { animation: mjHuWobble 1.2s ease-in-out var(--ph, 0ms) infinite; }
@keyframes mjHuWobble { 0%, 100% { transform: rotate(0) scale(1); } 20% { transform: rotate(-9deg) scale(1.1); } 40% { transform: rotate(8deg) scale(1.1); } 60% { transform: rotate(0) scale(1); } }
.mjacts .mjbtn.pass::before { display: none; }

/* ---------- 胡牌特效 ---------- */
.mjhu { position: absolute; inset: 0; --u: calc(var(--gh, 352px) / 100); }
.mjhu > * { position: absolute; left: 50%; top: 46%; }
.mjhuflash { left: 0; top: 0; inset: 0; background: radial-gradient(circle at 50% 46%, rgba(255, 250, 220, .95), rgba(255, 200, 80, .5) 30%, transparent 70%); opacity: 0; }
@keyframes mjHuFlash { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }
.mjhurays {
  width: calc(var(--u) * 190); height: calc(var(--u) * 190); margin: calc(var(--u) * -95);
  background: repeating-conic-gradient(rgba(255, 220, 110, .5) 0 7deg, transparent 7deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 12%, rgba(0, 0, 0, .6) 30%, transparent 62%); mask: radial-gradient(circle, #000 12%, rgba(0, 0, 0, .6) 30%, transparent 62%);
  border-radius: 50%; opacity: 0;
}
@keyframes mjHuRays { 0% { transform: scale(.3) rotate(0); opacity: 0; } 12% { transform: scale(1) rotate(12deg); opacity: 1; } 80% { opacity: .9; } 100% { transform: scale(1.1) rotate(70deg); opacity: 0; } }
.mjhuring {
  width: calc(var(--u) * 40); height: calc(var(--u) * 40); margin: calc(var(--u) * -20); border-radius: 50%;
  border: calc(var(--u) * 2.2) solid #ffe27a; box-shadow: 0 0 20px rgba(255, 200, 60, .9), inset 0 0 20px rgba(255, 200, 60, .7); opacity: 0;
}
.mjhuring.r2 { border-color: #ff6a5a; box-shadow: 0 0 20px rgba(255, 80, 60, .9); }
@keyframes mjHuRing { 0% { transform: scale(.2); opacity: 1; } 100% { transform: scale(3.6); opacity: 0; border-width: 1px; } }
.mjbit { width: calc(var(--u) * 4.4 * var(--sz)); height: calc(var(--u) * 4.4 * var(--sz)); margin: calc(var(--u) * -2.2 * var(--sz)); opacity: 0; }
.mjbit.coin { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff8c8, #ffd23c 45%, #c98a00 80%); box-shadow: inset 0 0 0 calc(var(--u) * .5) #e8a800, 0 0 8px rgba(255, 210, 60, .8); }
.mjbit.paper { height: calc(var(--u) * 2.2 * var(--sz)); border-radius: 2px; background: hsl(var(--hue) 90% 62%); }
.mjbit.star { background: #fff4b0; clip-path: polygon(50% 0, 61% 38%, 100% 38%, 68% 61%, 79% 100%, 50% 76%, 21% 100%, 32% 61%, 0 38%, 39% 38%); filter: drop-shadow(0 0 4px #ffd34d); }
@keyframes mjBit {
  0% { transform: translate(0, 0) scale(.3) rotate(0); opacity: 0; }
  8% { opacity: 1; }
  45% { transform: translate(calc(var(--dx) * var(--u)), calc(var(--dy) * var(--u))) scale(1) rotate(calc(var(--rot) * .5)); opacity: 1; }
  100% { transform: translate(calc(var(--dx) * var(--u) * 1.15), calc((var(--dy) + var(--fall)) * var(--u))) scale(.9) rotate(var(--rot)); opacity: 0; }
}
/* 胡的大字下面放那张胡的牌，金光一圈 */
.mjfx.big b { font-size: calc(var(--gh, 352px) * .26); }
.mjfxtile { margin-top: 2px; filter: drop-shadow(0 0 10px rgba(255, 215, 90, 1)) drop-shadow(0 0 22px rgba(255, 150, 40, .8)); animation: mjFxTile 1.4s ease-in-out infinite alternate; }
@keyframes mjFxTile { to { transform: translateY(-4px) scale(1.06); } }
@keyframes mjShake {
  0%, 100% { transform: none; } 15% { transform: translate(-6px, 3px); } 30% { transform: translate(5px, -4px); }
  45% { transform: translate(-4px, -2px); } 60% { transform: translate(3px, 3px); } 80% { transform: translate(-2px, 1px); }
}