/* 首页 · 干净底图（hall.png 1504×704，商业元素已在图上抹除） */

.stage {
  position: fixed; inset: 0; overflow: hidden;
  background: #79b7d6;
  font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* 图片盒：按高度撑满横屏视口（cover 语义），左右超出部分裁掉；
   公告/热区都以 .shot 为坐标系 → 和图内元素永远对齐 */
.shot {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 100%; min-width: 213.7vh; aspect-ratio: 1504 / 704;
  /* 1em ≈ 图宽的 1/38，随屏幕等比缩放 */
  font-size: calc(max(100vw, 213.7vh) / 38);
}
.hall-img { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }

/* 红色公告横幅：复刻参考图同款（红橙渐变胶囊 + 左喇叭 + 白字描边），文字循环滚动，
   居中置于正上方；top 按"底边与左上人物卡底边齐平"计算（人物卡底 ≈ 12%） */
.notice {
  position: absolute; z-index: 3; left: 50%; top: 4.8%; width: 46.5%; height: 7.2%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.25em; padding: 0 0.8em 0 0.5em;
  background: linear-gradient(90deg, #ff9a6a, #f0604d 45%, #e23d3d);
  border: 0.07em solid rgba(255, 255, 255, 0.6); border-radius: 999px;
  box-shadow: 0 0.1em 0.35em rgba(190, 50, 30, 0.45), inset 0 0.15em 0.2em rgba(255, 255, 255, 0.25);
}
.notice-horn { flex: none; font-size: 0.55em; }
.notice-win { flex: 1; overflow: hidden; }
.notice-run {
  display: flex; width: max-content;
  animation: marqueeRun 22s linear infinite;
}
.notice-run span {
  padding-right: 4em; white-space: nowrap;
  color: #fff; font-size: 0.46em; font-weight: 900; letter-spacing: 0.03em;
  text-shadow: 0 0.06em 0 rgba(140, 25, 5, 0.75);
}
@keyframes marqueeRun { to { transform: translateX(-50%); } }

/* ── 左上人物卡（随机昵称 + 设备绑定 ID，可掷骰换昵称头像） ── */
.idcard {
  position: absolute; z-index: 6; left: 2%; top: 2.5%; width: 16.5%;
  display: flex; align-items: center; gap: 0.22em;
  background: linear-gradient(180deg, rgba(13, 92, 66, 0.94), rgba(8, 60, 42, 0.94));
  border: 0.09em solid #f2c14e; border-radius: 0.45em; padding: 0.18em 0.22em;
  box-shadow: 0 0.2em 0.6em rgba(0, 0, 0, 0.35);
}
.idava { width: 1.15em; height: 1.15em; border-radius: 0.25em; border: 0.07em solid rgba(255, 255, 255, 0.75); background: #fff; flex: none; }
.idtxt { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.idtxt b { color: #fff; font-size: 0.44em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idtxt i { color: #ffd97a; font-size: 0.33em; font-style: normal; letter-spacing: 0.04em; }
.idroll { cursor: pointer; font-size: 0.58em; padding: 0.1em 0.18em; border-radius: 0.25em; background: rgba(255, 255, 255, 0.12); flex: none; }
.idroll:active { background: rgba(255, 255, 255, 0.28); }

/* 金色玩法面板：三列热区（真机截图标定：三卡在 shot 内 x 39.5%~85%、y 33%~84%） */
.board {
  position: absolute; z-index: 3; left: 39.5%; top: 33%; width: 45%; height: 51%;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3em;
}
.bhit { cursor: pointer; border-radius: 0.9em; -webkit-tap-highlight-color: transparent; }
.bhit:active { background: rgba(255, 255, 255, 0.16); }

/* 中间卡「多赖」艺术字贴图（背景已抠透明，颜色完全随卡片；left/top=字心，width=大小，均可免费微调） */
.duolai-art {
  position: absolute; z-index: 4; left: 60.43%; top: 62.05%;
  transform: translate(-50%, -50%);
  width: 8.62%; height: auto; pointer-events: none; user-select: none; -webkit-user-drag: none;
  /* 3D字效果：4层实心深绿投影堆叠伪造"底部挤出"（商业手游艺术字同款观感），最底一层柔影落地 */
  filter: drop-shadow(0 1px 0 #0c4425) drop-shadow(0 2px 0 #093a1e) drop-shadow(0 3px 0 #072f18) drop-shadow(0 4px 0 #052613) drop-shadow(0 7px 8px rgba(2, 25, 12, 0.55));
}

/* 左卡「發」麻将徽标贴图（牌+骰+光晕圆底，自带光效不再加投影）；left/top=圆心，width=直径，可微调 */
.mj-badge {
  position: absolute; z-index: 4; left: 45.9%; top: 43%;
  transform: translate(-50%, -50%);
  width: 10.5%; height: auto; pointer-events: none; user-select: none; -webkit-user-drag: none;
  /* 落地柔影：深蓝灰色，让圆盘从卡面上"浮"起来（原来零投影显平） */
  filter: drop-shadow(0 2px 2px rgba(6, 45, 70, 0.4)) drop-shadow(0 6px 9px rgba(6, 45, 70, 0.35));
}

/* 左卡「一赖」艺术字贴图：位于蓝色卡麻将牌图案下方；left=列心47%，top=标题行，width=大小，均可免费微调 */
.yilai-art {
  position: absolute; z-index: 4; left: 45.6%; top: 62%;
  transform: translate(-50%, -50%);
  width: 9.4%; height: auto; pointer-events: none; user-select: none; -webkit-user-drag: none;
  filter: drop-shadow(0 1px 0 #0c4425) drop-shadow(0 2px 0 #093a1e) drop-shadow(0 3px 0 #072f18) drop-shadow(0 4px 0 #052613) drop-shadow(0 7px 8px rgba(2, 25, 12, 0.55));
}

/* 右卡「正在开发中 / 敬请期待...」艺术字贴图：与「多赖」同款白面深绿描边艺术字；left/top=贴图中心，width=大小 */
.soon2-art {
  position: absolute; z-index: 4; left: 76.4%; top: 62.4%;
  transform: translate(-50%, -50%);
  width: 11.6%; height: auto; pointer-events: none; user-select: none; -webkit-user-drag: none;
  filter: drop-shadow(0 1px 0 #0c4425) drop-shadow(0 2px 0 #093a1e) drop-shadow(0 3px 0 #072f18) drop-shadow(0 4px 0 #052613) drop-shadow(0 7px 8px rgba(2, 25, 12, 0.55));
}

/* 右卡两行小字「正在开发中 / 敬请期待...」：标题已从底图抹除，CSS 叠加，字号比原艺术字小，居中于右列（left=列心，top 与「多赖」同高） */
.soon2 {
  position: absolute; z-index: 4; left: 77%; top: 62.05%;
  transform: translate(-50%, -50%);
  text-align: center; line-height: 1.35; white-space: nowrap;
  color: #fff; font-weight: 900; font-size: 0.34em; letter-spacing: 0.04em;
  pointer-events: none; user-select: none;
  text-shadow: -2px -2px 0 #0c5f38, 2px -2px 0 #0c5f38, -2px 2px 0 #0c5f38, 2px 2px 0 #0c5f38, 0 2px 0 #0c5f38, 0 -2px 0 #0c5f38, 2px 0 0 #0c5f38, -2px 0 0 #0c5f38, 0 5px 6px rgba(5, 45, 24, 0.45);
}

/* 竖屏浮动入口（竖屏会裁掉画面上下，热区可能不在视野时用这个） */
.penter {
  display: none; position: absolute; z-index: 7; left: 50%; bottom: 10%; transform: translateX(-50%);
  font-size: 16px; font-weight: 900; letter-spacing: 2px; color: #6b3d00;
  background: linear-gradient(180deg, #ffe28a, #d9a520 70%, #b07f10);
  border: 2px solid #fff2cf; border-radius: 999px; padding: 10px 28px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); cursor: pointer;
}

/* 竖屏提示 */
.rotate-hint2 {
  display: none; position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 6;
  align-items: center; gap: 8px;
  background: rgba(0, 0, 0, 0.55); color: #ffe9b0; font-size: 12px;
  padding: 6px 14px; border-radius: 999px;
}
.rotate-hint2 span { font-size: 16px; animation: spinHint 2.2s ease-in-out infinite; }
@keyframes spinHint { 0%, 60%, 100% { transform: rotate(0); } 75% { transform: rotate(90deg); } 90% { transform: rotate(90deg); } }

@media (orientation: portrait) {
  .penter { display: block; }
  .rotate-hint2 { display: flex; }
}

/* ── 牌桌座位头像（table.css 为生成物，样式写这里） ── */
.chip-ava { background-size: cover; background-position: center; position: relative; overflow: visible; color: transparent; }
.ava-wind {
  position: absolute; right: -3px; bottom: -3px; z-index: 2;
  width: 13px; height: 13px; border-radius: 50%;
  background: linear-gradient(180deg, #ffe9b0, #d9a520);
  color: #4a2f00; font-size: 8px; font-style: normal; font-weight: 800; line-height: 13px; text-align: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.gh-opp-ava .ava-wind { right: -2px; bottom: -2px; width: 11px; height: 11px; line-height: 11px; font-size: 7px; }