/* ==================================================================
 * tiles.css —— 纯 CSS/SVG 自绘的 34 种麻将牌面（零素材依赖）
 *
 * 设计原则（与另外三个游戏一致：项目不使用任何图片/字体资源）：
 *   - 牌壳 .mj-tile 尺寸由 CSS 变量 --tw / --th 控制，手牌 / 副露 / 牌河 / 指示牌共用同一套
 *   - 万子 / 字牌用 CSS content 写汉字
 *   - 筒子 / 索子用内联 SVG data URI 画点阵与竖条（无外部文件）
 *   - 赤宝牌（红 5）：.is-red 把点数/点阵染红
 *
 * ⚠ 类名与 rules/tiles.js 的 tileKey() 一一对应：.t-m1 …… .t-z7，不得改动。
 * ================================================================== */

/* ---------- 牌壳 ---------- */
.mj-tile {
  --tw: 34px; --th: 48px;
  width: var(--tw); height: var(--th);
  background: linear-gradient(170deg, #ffffff 0%, #f4f1e8 100%);
  border: 1px solid #d9cfb6; border-radius: 5px;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
  position: relative; flex: 0 0 auto; cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: center;
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  color: #1c2b24; overflow: hidden;
  transition: transform .12s, box-shadow .12s;
}
.mj-tile.mini { --tw: 18px; --th: 26px; }
.mj-tile.micro { --tw: 14px; --th: 20px; }
.mj-tile.is-static { cursor: default; }

/* 牌面内层：承载点阵背景 */
.mj-tile .mj-face { position: absolute; inset: 10%; }

/* 牌背：复用斗地主的斜纹渐变，保持三游戏手感一致 */
.mj-tile.is-back {
  background: repeating-linear-gradient(45deg, #264d8f 0 4px, #1d3d73 4px 8px);
  border-color: #16305c;
}
.mj-tile.is-back::after {
  content: ""; position: absolute; inset: 2px; border: 1px solid rgba(255,255,255,.18); border-radius: 3px;
}

/* 赤宝牌：点数与点阵染红 + 轻微红色光晕 */
.mj-tile.is-red { box-shadow: 0 2px 6px rgba(0,0,0,.4), 0 0 0 1px rgba(214,48,49,.5); }
.mj-tile.is-red .mj-sub,
.mj-tile.is-red .mj-num,
.mj-tile.is-red .mj-honor { color: #d63031; }
/* 筒 5 / 索 5 在下方有专门的红色点阵版本（.is-red.t-p5 / .is-red.t-s5） */

/* ---------- 万子：数字汉字 + 萬 ---------- */
.mj-tile[class*="t-m"] { flex-direction: column; justify-content: center; line-height: 1; }
.mj-tile[class*="t-m"] .mj-num { font-size: calc(var(--th) * 0.30); font-weight: 800; color: #b51f20; }
.mj-tile[class*="t-m"] .mj-sub { font-size: calc(var(--th) * 0.34); font-weight: 800; color: #1c2b24; }
.mj-tile.is-red[class*="t-m"] .mj-num,
.mj-tile.is-red[class*="t-m"] .mj-sub { color: #d63031; }

/* ---------- 字牌：单一汉字，白/发/中 各有传统配色 ---------- */
.mj-tile[class*="t-z"] .mj-honor { font-size: calc(var(--th) * 0.56); font-weight: 800; }
.mj-tile.t-z1 .mj-honor, .mj-tile.t-z2 .mj-honor,
.mj-tile.t-z3 .mj-honor, .mj-tile.t-z4 .mj-honor { color: #1c2b24; }   /* 东南西北 */
.mj-tile.t-z5 .mj-honor { color: #1c4f8f; }                              /* 白：蓝框字 */
.mj-tile.t-z5 .mj-honor::before {
  content: ""; position: absolute; inset: 22% 26%; border: 2px solid #1c4f8f; border-radius: 2px;
}
.mj-tile.t-z6 .mj-honor { color: #0f8a5f; }                              /* 发：绿 */
.mj-tile.t-z7 .mj-honor { color: #d63031; }                              /* 中：红 */

/* ---------- 筒子：SVG 圆点阵列（40 × 62 视图坐标） ---------- */
.mj-tile[class*="t-p"] .mj-face { background-repeat: no-repeat; background-size: 100% 100%; }
.mj-tile.t-p1 .mj-face { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 62'><circle cx='20' cy='31' r='11' fill='%231c4f8f'/><circle cx='20' cy='31' r='5' fill='%23f4f1e8'/></svg>"); }
.mj-tile.t-p2 .mj-face { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 62'><circle cx='20' cy='16' r='8' fill='%231c4f8f'/><circle cx='20' cy='46' r='8' fill='%230f8a5f'/></svg>"); }
.mj-tile.t-p3 .mj-face { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 62'><circle cx='11' cy='13' r='7' fill='%231c4f8f'/><circle cx='20' cy='31' r='7' fill='%230f8a5f'/><circle cx='29' cy='49' r='7' fill='%23b51f20'/></svg>"); }
.mj-tile.t-p4 .mj-face { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 62'><circle cx='12' cy='16' r='7' fill='%231c4f8f'/><circle cx='28' cy='16' r='7' fill='%230f8a5f'/><circle cx='12' cy='46' r='7' fill='%230f8a5f'/><circle cx='28' cy='46' r='7' fill='%231c4f8f'/></svg>"); }
.mj-tile.t-p5 .mj-face { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 62'><circle cx='11' cy='14' r='7' fill='%231c4f8f'/><circle cx='29' cy='14' r='7' fill='%230f8a5f'/><circle cx='20' cy='31' r='7' fill='%23b51f20'/><circle cx='11' cy='48' r='7' fill='%230f8a5f'/><circle cx='29' cy='48' r='7' fill='%231c4f8f'/></svg>"); }
.mj-tile.t-p6 .mj-face { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 62'><circle cx='11' cy='13' r='7' fill='%230f8a5f'/><circle cx='29' cy='13' r='7' fill='%230f8a5f'/><circle cx='11' cy='31' r='7' fill='%231c4f8f'/><circle cx='29' cy='31' r='7' fill='%231c4f8f'/><circle cx='11' cy='49' r='7' fill='%230f8a5f'/><circle cx='29' cy='49' r='7' fill='%230f8a5f'/></svg>"); }
.mj-tile.t-p7 .mj-face { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 62'><circle cx='11' cy='11' r='6' fill='%230f8a5f'/><circle cx='20' cy='11' r='6' fill='%230f8a5f'/><circle cx='29' cy='11' r='6' fill='%230f8a5f'/><circle cx='11' cy='27' r='6' fill='%231c4f8f'/><circle cx='29' cy='27' r='6' fill='%231c4f8f'/><circle cx='11' cy='47' r='6' fill='%231c4f8f'/><circle cx='29' cy='47' r='6' fill='%231c4f8f'/></svg>"); }
.mj-tile.t-p8 .mj-face { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 62'><circle cx='12' cy='9' r='6' fill='%231c4f8f'/><circle cx='28' cy='9' r='6' fill='%231c4f8f'/><circle cx='12' cy='24' r='6' fill='%230f8a5f'/><circle cx='28' cy='24' r='6' fill='%230f8a5f'/><circle cx='12' cy='39' r='6' fill='%230f8a5f'/><circle cx='28' cy='39' r='6' fill='%230f8a5f'/><circle cx='12' cy='54' r='6' fill='%231c4f8f'/><circle cx='28' cy='54' r='6' fill='%231c4f8f'/></svg>"); }
.mj-tile.t-p9 .mj-face { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 62'><circle cx='10' cy='11' r='6' fill='%23b51f20'/><circle cx='20' cy='11' r='6' fill='%230f8a5f'/><circle cx='30' cy='11' r='6' fill='%231c4f8f'/><circle cx='10' cy='31' r='6' fill='%230f8a5f'/><circle cx='20' cy='31' r='6' fill='%231c4f8f'/><circle cx='30' cy='31' r='6' fill='%230f8a5f'/><circle cx='10' cy='51' r='6' fill='%231c4f8f'/><circle cx='20' cy='51' r='6' fill='%230f8a5f'/><circle cx='30' cy='51' r='6' fill='%23b51f20'/></svg>"); }

/* ---------- 索子：SVG 竖条（与筒子同坐标网格） ---------- */
.mj-tile[class*="t-s"] .mj-face { background-repeat: no-repeat; background-size: 100% 100%; }
.mj-tile.t-s1 .mj-face { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 62'><rect x='16' y='8' width='8' height='46' rx='4' fill='%230f8a5f'/><rect x='14' y='6' width='12' height='7' rx='3' fill='%23b51f20'/></svg>"); }
.mj-tile.t-s2 .mj-face { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 62'><rect x='11' y='10' width='7' height='42' rx='3' fill='%230f8a5f'/><rect x='23' y='10' width='7' height='42' rx='3' fill='%231c4f8f'/></svg>"); }
.mj-tile.t-s3 .mj-face { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 62'><rect x='8' y='9' width='6' height='18' rx='3' fill='%230f8a5f'/><rect x='17' y='22' width='6' height='18' rx='3' fill='%230f8a5f'/><rect x='26' y='35' width='6' height='18' rx='3' fill='%230f8a5f'/></svg>"); }
.mj-tile.t-s4 .mj-face { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 62'><rect x='10' y='10' width='6' height='42' rx='3' fill='%231c4f8f'/><rect x='24' y='10' width='6' height='42' rx='3' fill='%230f8a5f'/><rect x='17' y='10' width='6' height='42' rx='3' fill='%230f8a5f'/><rect x='31' y='10' width='6' height='42' rx='3' fill='%231c4f8f'/></svg>"); }
.mj-tile.t-s5 .mj-face { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 62'><rect x='7' y='11' width='6' height='16' rx='3' fill='%230f8a5f'/><rect x='17' y='11' width='6' height='16' rx='3' fill='%230f8a5f'/><rect x='27' y='11' width='6' height='16' rx='3' fill='%230f8a5f'/><rect x='12' y='35' width='6' height='16' rx='3' fill='%231c4f8f'/><rect x='22' y='35' width='6' height='16' rx='3' fill='%231c4f8f'/></svg>"); }
.mj-tile.t-s6 .mj-face { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 62'><rect x='8' y='10' width='5' height='14' rx='2' fill='%230f8a5f'/><rect x='18' y='10' width='5' height='14' rx='2' fill='%230f8a5f'/><rect x='28' y='10' width='5' height='14' rx='2' fill='%230f8a5f'/><rect x='8' y='38' width='5' height='14' rx='2' fill='%230f8a5f'/><rect x='18' y='38' width='5' height='14' rx='2' fill='%230f8a5f'/><rect x='28' y='38' width='5' height='14' rx='2' fill='%230f8a5f'/></svg>"); }
.mj-tile.t-s7 .mj-face { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 62'><rect x='12' y='6' width='5' height='13' rx='2' fill='%23b51f20'/><rect x='22' y='6' width='5' height='13' rx='2' fill='%230f8a5f'/><rect x='7' y='24' width='5' height='13' rx='2' fill='%230f8a5f'/><rect x='17' y='24' width='5' height='13' rx='2' fill='%23b51f20'/><rect x='27' y='24' width='5' height='13' rx='2' fill='%230f8a5f'/><rect x='12' y='42' width='5' height='13' rx='2' fill='%230f8a5f'/><rect x='22' y='42' width='5' height='13' rx='2' fill='%230f8a5f'/></svg>"); }
.mj-tile.t-s8 .mj-face { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 62'><rect x='9' y='6' width='5' height='11' rx='2' fill='%230f8a5f'/><rect x='19' y='6' width='5' height='11' rx='2' fill='%230f8a5f'/><rect x='29' y='6' width='5' height='11' rx='2' fill='%230f8a5f'/><rect x='9' y='24' width='5' height='11' rx='2' fill='%230f8a5f'/><rect x='19' y='24' width='5' height='11' rx='2' fill='%230f8a5f'/><rect x='29' y='24' width='5' height='11' rx='2' fill='%230f8a5f'/><rect x='9' y='42' width='5' height='11' rx='2' fill='%230f8a5f'/><rect x='19' y='42' width='5' height='11' rx='2' fill='%230f8a5f'/></svg>"); }
.mj-tile.t-s9 .mj-face { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 62'><rect x='7' y='5' width='5' height='11' rx='2' fill='%230f8a5f'/><rect x='17' y='5' width='5' height='11' rx='2' fill='%230f8a5f'/><rect x='27' y='5' width='5' height='11' rx='2' fill='%230f8a5f'/><rect x='7' y='25' width='5' height='11' rx='2' fill='%23b51f20'/><rect x='17' y='25' width='5' height='11' rx='2' fill='%230f8a5f'/><rect x='27' y='25' width='5' height='11' rx='2' fill='%23b51f20'/><rect x='7' y='45' width='5' height='11' rx='2' fill='%230f8a5f'/><rect x='17' y='45' width='5' height='11' rx='2' fill='%230f8a5f'/><rect x='27' y='45' width='5' height='11' rx='2' fill='%230f8a5f'/></svg>"); }

/* ---------- 赤 5：把点阵换成红色版本 ---------- */
.mj-tile.is-red.t-p5 .mj-face { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 62'><circle cx='11' cy='14' r='7' fill='%23d63031'/><circle cx='29' cy='14' r='7' fill='%23d63031'/><circle cx='20' cy='31' r='7' fill='%23d63031'/><circle cx='11' cy='48' r='7' fill='%23d63031'/><circle cx='29' cy='48' r='7' fill='%23d63031'/></svg>"); }
.mj-tile.is-red.t-s5 .mj-face { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 62'><rect x='7' y='11' width='6' height='16' rx='3' fill='%23d63031'/><rect x='17' y='11' width='6' height='16' rx='3' fill='%23d63031'/><rect x='27' y='11' width='6' height='16' rx='3' fill='%23d63031'/><rect x='12' y='35' width='6' height='16' rx='3' fill='%23d63031'/><rect x='22' y='35' width='6' height='16' rx='3' fill='%23d63031'/></svg>"); }