/* =========================================================
   红中血流 · 参考视频风格增强
   红绒牌桌、绿色牌墙、中央 LCD、右侧功能栏、番型预览
   ========================================================= */

.mj-screen { background: #1b0507; }

.mj-screen .felt {
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255, 220, 150, .12), transparent 54%),
    radial-gradient(ellipse at 50% 45%, #972d31 0%, #7a1d22 36%, #541015 68%, #2a070b 100%);
}
.mj-screen .felt::before {
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 235, 200, .028) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(-45deg, rgba(255, 235, 200, .022) 0 1px, transparent 1px 13px);
  opacity: .75;
}
.mj-screen .felt::after { opacity: .04; }

.mj-screen .mj-table-rim {
  border: 6px solid #4b2a16;
  box-shadow:
    inset 0 0 0 2px rgba(236, 200, 128, .48),
    inset 0 0 90px rgba(0, 0, 0, .62),
    0 0 0 2px #160805,
    0 18px 48px rgba(0, 0, 0, .52);
}
.mj-screen .mj-arena::before {
  background:
    radial-gradient(circle at 50% 48%, transparent 0 17%, rgba(233, 197, 126, .06) 17.2% 17.6%, transparent 17.8% 31%, rgba(233, 197, 126, .05) 31.2% 31.6%, transparent 31.8%),
    radial-gradient(ellipse at 50% 45%, transparent 0 55%, rgba(0, 0, 0, .24) 100%);
}
.mj-screen .mj-bamboo { display: none; }
.mj-start-banner { z-index: 62; }

.mj-table-mark {
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
  z-index: 5;
  pointer-events: none;
  font-family: var(--font-kai);
  font-size: 11px;
  letter-spacing: 8px;
  color: rgba(246, 215, 153, .15);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
  white-space: nowrap;
}

/* 牌墙外框 */
.mj-edge-wall {
  position: absolute;
  z-index: 8;
  pointer-events: none;
  border-radius: 3px;
  border: 1px solid rgba(214, 188, 133, .38);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4), 0 4px 10px rgba(0, 0, 0, .35);
  background:
    repeating-linear-gradient(90deg,
      #d9c697 0 1px, #0d6a3c 1px 3px, #148a50 3px 16px,
      #0b5733 16px 18px, #d9c697 18px 19px, #127a47 19px 32px);
}
.mj-edge-wall::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .18), transparent 45%, rgba(0, 0, 0, .16));
}
.mj-edge-top { top: 7px; left: 30%; right: 30%; height: 16px; background-size: 34px 100%; }
.mj-edge-left { left: 1.8%; top: 21%; bottom: 25%; width: 15px; background-image: repeating-linear-gradient(180deg, #d9c697 0 1px, #0d6a3c 1px 3px, #148a50 3px 16px, #0b5733 16px 18px, #d9c697 18px 19px, #127a47 19px 32px); }
.mj-edge-right { right: 1.8%; top: 21%; bottom: 25%; width: 15px; background-image: repeating-linear-gradient(180deg, #d9c697 0 1px, #0d6a3c 1px 3px, #148a50 3px 16px, #0b5733 16px 18px, #d9c697 18px 19px, #127a47 19px 32px); }

/* 中央 LCD */
.mj-screen .mj-wall {
  width: 82px;
  height: 82px;
  border-radius: 9px;
  border: 3px solid #b58a4d;
  background: linear-gradient(160deg, #0b3827, #041610 68%, #020b08);
  box-shadow:
    0 0 0 2px #28130c,
    0 0 0 3px rgba(235, 202, 131, .24),
    0 12px 24px rgba(0, 0, 0, .4),
    inset 0 0 18px rgba(56, 255, 166, .06);
}
.mj-screen .mj-wall::before {
  inset: 5px;
  border: 1px solid rgba(85, 244, 174, .2);
  border-radius: 5px;
}
.mj-screen .mj-wall::after { content: none; }
.mj-screen .mj-wall b {
  color: #65ffc0;
  font-family: "Consolas", "Courier New", monospace;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 0 0 12px rgba(70, 255, 172, .55), 0 0 3px rgba(70, 255, 172, .8);
}
.mj-screen .mj-wall-top {
  font-size: 5px;
  letter-spacing: 1.6px;
  color: rgba(132, 240, 195, .45);
  margin-bottom: 0;
}
.mj-screen .mj-wall small { color: rgba(137, 232, 192, .42); font-size: 5.5px; letter-spacing: 1.8px; }
.mj-wall-wind, .mj-wall-seat {
  position: absolute;
  top: 9px;
  font-family: var(--font-kai);
  font-size: 9px;
  color: #e8ca86;
  opacity: .8;
}
.mj-wall-wind { left: 8px; }
.mj-wall-seat { right: 8px; }

/* 侧边功能栏 */
.mj-rail {
  position: absolute;
  right: 1.2%;
  top: 64%;
  z-index: 92;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: translateY(-50%);
}
.mj-rail-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(228, 195, 125, .52);
  background: radial-gradient(circle at 36% 28%, #394445, #121b1b 52%, #050b0b);
  color: #f0d79d;
  box-shadow: 0 3px 9px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 244, 210, .18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-size: 7px;
  letter-spacing: .5px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.mj-rail-btn b { font-family: var(--font-kai); font-size: 12px; line-height: 1; font-weight: 400; color: #ffe2a0; }
.mj-rail-btn span { font-size: 5.5px; color: rgba(242, 223, 180, .72); margin-top: 0; }
.mj-rail-btn:active { transform: scale(.94); }
.mj-rail-btn.is-on { border-color: #ffd66c; box-shadow: 0 0 0 2px rgba(255, 208, 102, .18), 0 0 18px rgba(255, 191, 73, .32); }
.mj-rail-btn.is-on b { color: #fff1b9; }

/* 手牌 */
.mj-screen .mj-hand { --hand-tw: clamp(42px, 5.15vw, 54px); gap: 2px; }
.mj-screen .mj-hand .mj-tile { filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .22)); }
.mj-screen .mj-hand .mj-tile .mj-tile-body {
  border-radius: 4px 4px 3px 3px;
  border-bottom: 4px solid #1d6844;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 -2px 0 rgba(0, 0, 0, .14) inset,
    0 4px 0 #0f462d,
    0 8px 12px rgba(0, 0, 0, .28);
}
.mj-screen .mj-hand .mj-tile.is-drawn { margin-left: 15px; }
.mj-screen .mj-hand .mj-tile.is-drawn .mj-tile-body {
  border-color: #f0cf89;
  box-shadow:
    0 0 0 2px rgba(255, 214, 119, .52),
    0 0 18px rgba(255, 199, 85, .38),
    0 4px 0 #0f462d,
    0 8px 12px rgba(0, 0, 0, .3);
}
.mj-screen .mj-hand .mj-tile.is-wild .mj-tile-body { border-bottom-color: #8d3427; }
.mj-wild-badge {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe9a4, #e0ad4a 55%, #8e5a15);
  color: #5b2b06;
  font-family: var(--font-kai);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #fff1bd;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .35);
  z-index: 6;
}
.mj-screen .mj-tile.is-wild { box-shadow: 0 0 0 1px rgba(255, 205, 112, .5), 0 4px 0 #0f462d, 0 0 18px rgba(255, 169, 70, .26); }

/* 牌河与副露 */
.mj-screen .mj-river .mj-tile { --tw: 29px; border-radius: 3px; }
.mj-screen .mj-river { filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .22)); }
.mj-screen .mj-river .mj-tile.is-last { box-shadow: 0 0 0 2px rgba(255, 216, 118, .78), 0 4px 10px rgba(0, 0, 0, .35); }
.mj-screen .mj-meld .mj-tile-meld { --tw: 21px; }

/* 座位 */
.mj-screen .mj-seat-left, .mj-screen .mj-seat-right { top: 22%; }
.mj-screen .mj-seat-top { top: 28px; }
.mj-screen .mj-seat-right { top: 15%; }
.mj-screen .mj-seat .seat-avatar-wrap { box-shadow: 0 0 0 2px rgba(232, 200, 132, .32), 0 8px 20px rgba(0, 0, 0, .32); }
.mj-screen .mj-seat .seat-name { color: #f1dfb9; }
.mj-screen .mj-seat .mj-seat-score { color: rgba(241, 219, 170, .72); }
.mj-screen .mj-seat .mj-seat-score span:last-child { color: #86e3b9; }
.mj-screen .mj-seat.is-turn .seat-avatar-wrap { box-shadow: 0 0 0 2px #ffd47d, 0 0 20px rgba(255, 190, 91, .35); }
.mj-screen .mj-user-seat .seat-avatar-wrap { box-shadow: 0 0 0 2px rgba(232, 200, 132, .32), 0 8px 20px rgba(0, 0, 0, .32); }

/* 顶部与操作按钮 */
.mj-screen .game-topbar { background: linear-gradient(180deg, #170a07, #2b110b 60%, #190806); border-bottom-color: rgba(214, 181, 119, .26); }
.mj-screen .game-brand-mini h2 { color: #f4dfb1; }
.mj-screen .game-room-info b { color: #f4dfb1; }
.mj-screen .mj-actionbar .action-btn { border-radius: 20px; }
.mj-screen .mj-actionbar .action-btn.primary { background: linear-gradient(180deg, #f5d98f, #cf9d45); color: #4a2808; border-color: #ffe8b5; box-shadow: 0 4px 12px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .45); }
.mj-screen .mj-actionbar .action-btn.hu-btn { border-radius: 50%; width: 48px; min-width: 48px; height: 48px; padding: 0; background: radial-gradient(circle at 35% 28%, #ff8b72, #d33130 52%, #8e161b); color: #fff4cf; border: 2px solid #ffd58e; box-shadow: 0 0 0 3px rgba(209, 49, 48, .18), 0 0 20px rgba(255, 97, 64, .35); }
.mj-screen .mj-actionbar .action-btn.hu-btn small { display: block; font-size: 6px; margin-top: -2px; }

/* 流水 */
.mj-screen .mj-win-log { display: none; }
.mj-screen .mj-win-log.is-open { display: flex; }

/* 番型/听牌预览 */
.mj-fan-panel {
  position: absolute;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 2, 3, .62);
}
.mj-fan-panel[hidden] { display: none; }
.mj-fan-card {
  width: min(690px, 76vw);
  max-height: 82%;
  overflow: auto;
  border-radius: 12px;
  border: 2px solid #b98c4a;
  background: linear-gradient(160deg, #fbf5e7, #efe3c9 62%, #e3d2b2);
  color: #3a2719;
  box-shadow: 0 0 0 3px rgba(70, 28, 12, .4), 0 22px 48px rgba(0, 0, 0, .55);
  padding: 13px 16px 12px;
}
.mj-fan-head { display: flex; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid rgba(125, 88, 45, .24); padding-bottom: 8px; }
.mj-fan-head span { font-size: 7px; letter-spacing: 2.4px; color: #9a6e37; }
.mj-fan-head h3 { font-family: var(--font-display); font-size: 19px; font-weight: 400; letter-spacing: 2px; color: #58351b; margin-top: 2px; }
.mj-fan-close { width: 26px; height: 26px; border-radius: 50%; background: #6c4527; color: #ffe9ba; font-size: 12px; border: 1px solid #a97b43; }
.mj-fan-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 9px 0; }
.mj-fan-stats > div { padding: 6px 8px; border-radius: 6px; background: rgba(120, 82, 39, .07); border: 1px solid rgba(129, 91, 45, .12); }
.mj-fan-stats span { display: block; font-size: 6.5px; color: #967344; letter-spacing: .8px; }
.mj-fan-stats b { display: block; font-size: 16px; color: #6e271a; font-weight: 700; line-height: 1.25; }
.mj-fan-stats b small { font-size: 8px; color: #9c7143; margin-left: 2px; }
.mj-fan-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; }
.mj-fan-item { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 2px 5px; border-radius: 6px; background: rgba(255, 250, 235, .52); border: 1px solid rgba(141, 101, 50, .16); }
.mj-fan-item.is-best { background: rgba(255, 228, 154, .55); border-color: #c3954a; box-shadow: 0 0 0 1px rgba(195, 149, 74, .25); }
.mj-fan-item .mj-tile-fan { --tw: 28px; transform: scale(.92); transform-origin: center; }
.mj-fan-item > b { font-size: 10px; color: #9a2d1c; font-weight: 700; }
.mj-fan-item > small { font-size: 6px; color: #876943; text-align: center; white-space: nowrap; }
.mj-fan-item > em { font-size: 6px; color: #5e452c; font-style: normal; text-align: center; line-height: 1.3; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mj-fan-empty { padding: 18px 10px; text-align: center; font-size: 10px; color: #7e5d36; }
.mj-fan-note { margin-top: 8px; font-size: 7px; color: #967344; text-align: center; letter-spacing: .4px; }

/* 胡牌大字 */
.mj-screen .mj-win-flash { text-shadow: 0 2px 0 rgba(90, 28, 12, .45); }

@media (max-width: 900px) and (orientation: landscape) {
  .mj-screen .mj-hand { --hand-tw: clamp(39px, 5vw, 48px); }
  .mj-fan-card { width: min(640px, 82vw); padding: 10px 12px; }
  .mj-fan-grid { grid-template-columns: repeat(9, 1fr); gap: 3px; }
  .mj-fan-item .mj-tile-fan { --tw: 24px; }
  .mj-rail { right: .8%; top: 58%; gap: 3px; }
  .mj-rail-btn { width: 28px; height: 28px; }
  .mj-rail-btn b { font-size: 11px; }
  .mj-rail-btn span { font-size: 4.8px; }
  .mj-edge-top { left: 25%; right: 25%; }
}
@media (max-width: 620px) and (max-height: 380px) and (orientation: landscape) {
  .mj-screen .mj-hand { --hand-tw: 38px; }
  .mj-fan-card { width: 88vw; max-height: 88%; }
  .mj-fan-item .mj-tile-fan { --tw: 22px; }
  .mj-rail { top: 55%; }
  .mj-rail-btn { width: 30px; height: 30px; }
  .mj-rail-btn b { font-size: 12px; }
  .mj-rail-btn span { display: none; }
}
@media (max-height: 340px) and (orientation: landscape) {
  .mj-rail { display: none; }
}
@media (max-width: 560px) and (orientation: portrait) {
  .mj-rail { display: none; }
  .mj-screen .mj-hand { --hand-tw: 30px; }
  .mj-fan-card { width: 94vw; max-height: 86%; padding: 10px; }
  .mj-fan-grid { grid-template-columns: repeat(5, 1fr); gap: 3px; }
  .mj-fan-item .mj-tile-fan { --tw: 23px; }
  .mj-fan-stats { grid-template-columns: repeat(2, 1fr); }
  .mj-edge-left, .mj-edge-right { display: none; }
}