:root {
  --gold: #edc96d;
  --felt: #0b654b;
  --dark: #061f19;
  --ivory: #fff8e5;
  --red: #bb292e;
  --blue: #3077bd;
  /* 牌墙可视化总缩放参数：数值越大，桌中四边待抓牌堆越大。 */
  --wall-visual-scale: 1.05;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: "Microsoft YaHei", "PingFang SC", sans-serif; background: #061d18; color: #f8f3e7; }
button, input { font: inherit; }
.hidden { display: none !important; }

.icp-footer {
  position: fixed;
  z-index: 18;
  left: 50%;
  bottom: max(8px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(94vw, 760px);
  padding: 4px 10px;
  border: 1px solid #31584d;
  border-radius: 999px;
  background: #041914cc;
  color: #9ebcb1;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  transform: translateX(-50%);
}
.icp-footer span {
  white-space: nowrap;
}
.icp-footer a {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.icp-footer a:hover {
  color: #f0d17e;
  text-decoration: underline;
}

.lobby {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(circle at 50% 35%, #17654e, #072a22 60%, #041713);
}
.hero-card {
  width: min(520px, 94vw);
  padding: 46px;
  border: 1px solid #527b68;
  border-radius: 28px;
  background: linear-gradient(145deg, #0d4437f2, #082d26f5);
  box-shadow: 0 30px 90px #0009;
  text-align: center;
}
.seal {
  margin: auto;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold);
  border-radius: 16px;
  color: var(--gold);
  font: 800 34px serif;
}
.eyebrow { color: #b8d2c7; letter-spacing: .18em; font-size: 12px; margin: 20px 0 7px; }
.hero-card h1 { font: 800 clamp(42px, 8vw, 68px) serif; color: #f2d587; margin: 0; }
.lead { color: #b7cdc4; line-height: 1.7; }
.site-purpose-note {
  margin: 16px 0 0;
  padding: 9px 12px;
  border: 1px solid #446d5f;
  border-radius: 12px;
  background: #082a23;
  color: #d2e0d9;
  font-size: 12px;
  line-height: 1.6;
}
.invite-help { margin: 13px 0 0; color: #91b9aa; font-size: 12px; }
.mobile-install-help { display: none; margin: 8px 0 0; color: #e2c86f; font-size: 12px; line-height: 1.55; }
.hero-card label { display: block; text-align: left; color: #d4e5de; font-size: 13px; margin: 28px 0 10px; }
.hero-card input { width: 100%; margin-top: 8px; padding: 14px 15px; border: 1px solid #4e7b6d; border-radius: 10px; background: #071f1a; color: white; outline: none; }
.lobby-actions { display: grid; gap: 12px; }
.join-box { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.lobby button, .actions button { border: 1px solid #5b8979; border-radius: 10px; padding: 13px 18px; background: #174f41; color: #f4faf7; cursor: pointer; }
.lobby button.gold, .actions button.gold { background: linear-gradient(#efd27f, #bc8431); border-color: #f4da92; color: #241a09; font-weight: 800; }
.error { min-height: 20px; color: #ff9b91; font-size: 13px; }

.game { min-height: 100vh; background: radial-gradient(circle, #0e5341, #061f1a 70%); padding-bottom: 128px; overflow: hidden; }
.game header { height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 0 3vw; background: #041a16e8; border-bottom: 1px solid #5a6e42; }
.header-tools { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.voice-choice { display: flex; align-items: center; gap: 6px; color: #b9d4c9; font-size: 12px; }
.voice-choice select { padding: 6px 25px 6px 9px; border: 1px solid #4d806f; border-radius: 15px; background: #0c4035; color: #fff5d7; outline: none; cursor: pointer; }
.live-voice-controls { display: grid; grid-template-columns: auto auto auto; grid-template-rows: 30px 12px; align-items: center; gap: 1px 5px; padding: 3px 8px; border: 1px solid #376c5b; border-radius: 11px; background: #082e27; }
.live-voice-title { grid-row: 1; color: #9fc1b5; font-size: 10px; white-space: nowrap; }
.live-voice-button { grid-row: 1; min-width: 76px; height: 28px; padding: 3px 8px; border: 1px solid #4d7e6e; border-radius: 14px; background: #103e34; color: #e6f0ec; cursor: pointer; font-size: 11px; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.live-voice-button span { margin-right: 3px; }
.live-voice-button b { font-size: 11px; }
.live-voice-button.active { border-color: #74e7ae; background: linear-gradient(#1b8d62, #116143); color: white; box-shadow: 0 0 10px #56d69a88; }
.live-voice-button:disabled { cursor: wait; opacity: .6; }
.live-voice-controls > small { grid-column: 1 / -1; overflow: hidden; color: #8fb8aa; font-size: 9px; line-height: 11px; text-overflow: ellipsis; white-space: nowrap; }
.live-voice-controls > small.voice-error { color: #ff9b91; }
.live-voice-controls.connecting { border-color: #d1ad51; box-shadow: 0 0 9px #d1ad5144; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand span { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--gold); border-radius: 9px; color: var(--gold); font: 800 23px serif; }
.room-pill { padding: 7px 10px 7px 16px; border: 1px solid #3e6e5f; border-radius: 24px; background: #0e3a31; color: #b7cec5; font-size: 12px; }
.room-pill strong { margin: 0 8px; color: var(--gold); font-size: 17px; letter-spacing: .15em; }
.room-pill button { border: 0; border-radius: 14px; padding: 5px 10px; background: #2a6655; color: white; }
.debug-wall-toggle { border: 1px solid #d8b753; border-radius: 16px; padding: 7px 13px; background: #493817; color: #f7dc86; cursor: pointer; font-size: 12px; font-weight: 800; box-shadow: 0 0 9px #e8c45f55; }
.debug-wall-toggle.active { background: #9b6520; color: #fff5cd; box-shadow: 0 0 14px #f2ca5b; }
.connection { font-size: 12px; color: #8fd5bb; }

.table-frame {
  width: min(1180px, 98vw);
  height: calc(100vh - 190px);
  min-height: 510px;
  margin: 8px auto;
  padding: 11px;
  border: 3px solid #ae7640;
  border-radius: 25px;
  background: linear-gradient(145deg, #80502b, #3d2414);
  box-shadow: 0 25px 60px #0008;
}
.felt { position: relative; width: 100%; height: 100%; border-radius: 15px; background: radial-gradient(circle, #19785a, #0a5a43 58%, #06402f); box-shadow: inset 0 0 80px #00271c; overflow: hidden; }
.felt-surface { position: absolute; inset: 0; }

/* 每个客户端都把自己放在下面：上家在左，对家在上，下家在右。 */
.seat { position: absolute; z-index: 10; min-width: 138px; padding: 7px 12px; border: 1px solid #4f8372; border-radius: 25px; background: #073d32ed; box-shadow: 0 5px 18px #002018; display: flex; align-items: center; gap: 8px; font-size: 12px; }
.seat-content { display: contents; }
.seat.current { border-color: var(--gold); box-shadow: 0 0 14px #efcc6e; }
.seat .avatar { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; display: grid; place-items: center; background: #c99c47; color: #213428; font-weight: 800; }
.seat small { display: block; color: #b7d1c7; }
.seat .ready { color: #8fe0b8; }
.seat .kick-player { margin-left: 7px; padding: 3px 7px; border: 1px solid #e3937f; border-radius: 10px; background: #7f3028dd; color: #fff2ed; font-size: 11px; line-height: 1.2; cursor: pointer; }
.seat .kick-player:hover { background: #a64034; box-shadow: 0 0 10px #ef765b88; }
.live-voice-badge { display: inline-grid; width: 18px; height: 18px; margin-left: 5px; place-items: center; border-radius: 50%; background: #165941; color: #a5f3c8; font-size: 10px; font-style: normal; vertical-align: middle; }
.live-voice-badge.speaking { background: #20a86d; color: #fff; box-shadow: 0 0 0 3px #5ae39c44, 0 0 11px #5ae39c; animation: live-voice-pulse .65s infinite alternate; }
.seat.voice-speaking { border-color: #5de39e; box-shadow: 0 0 15px #42d78e; }
@keyframes live-voice-pulse { to { transform: scale(1.18); } }
.player-chat-bubble {
  position: absolute;
  z-index: 18;
  left: 50%;
  bottom: calc(100% + 9px);
  width: max-content;
  max-width: 220px;
  padding: 7px 10px;
  border: 1px solid #efd98d;
  border-radius: 12px;
  background: #fff8df;
  color: #26372f;
  box-shadow: 0 5px 16px #001d16aa;
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  transform: translateX(-50%);
  animation: chat-bubble-in .18s ease-out;
  pointer-events: none;
}
.player-chat-bubble::after { content: ""; position: absolute; left: 50%; top: 100%; border: 6px solid transparent; border-top-color: #fff8df; transform: translateX(-50%); }
.pos-top .player-chat-bubble { top: calc(100% + 9px); bottom: auto; }
.pos-top .player-chat-bubble::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #fff8df; }
@keyframes chat-bubble-in { from { opacity: 0; transform: translate(-50%, 5px) scale(.96); } }
.pos-top { top: 9px; left: 50%; transform: translateX(-50%); }
.pos-right { right: 9px; top: 50%; transform: translateY(-50%); }
.pos-bottom { bottom: 9px; left: 50%; transform: translateX(-50%); }
.pos-left { left: 9px; top: 50%; transform: translateY(-50%); }

/* 四边各17摞，直接使用四个玩家方向对应的牌墙图片。 */
.wall { position: absolute; z-index: 4; display: flex; gap: 2px; }
.wall.top { top: 112px; left: 50%; transform: translateX(-50%) scale(var(--wall-visual-scale)); }
.wall.bottom { bottom: 112px; left: 50%; transform: translateX(-50%) scale(var(--wall-visual-scale)); }
.wall.left { left: 185px; top: 50%; transform: translateY(-50%) scale(var(--wall-visual-scale)); flex-direction: column; }
.wall.right { right: 185px; top: 50%; transform: translateY(-50%) scale(var(--wall-visual-scale)); flex-direction: column; }
.stack { position: relative; display: block; flex: 0 0 31px; width: 31px; height: 48px; }
.mini { position: absolute; display: block; width: 29px; height: 41px; border: 0; background: transparent; }
.mini.top-layer { left: 0; top: 0; z-index: 2; }
.mini.bottom-layer { left: 2px; top: 7px; z-index: 1; }
.left .stack, .right .stack { flex-basis: 31px; width: 48px; height: 31px; }
.left .mini, .right .mini { width: 42px; height: 29px; }
.left .mini.top-layer, .right .mini.top-layer { left: 0; top: 0; }
.left .mini.bottom-layer, .right .mini.bottom-layer { left: 7px; top: 2px; }
.wall-back-image, .mini .wall-face { display: block; width: 100%; height: 100%; object-fit: contain; }
.mini.gap { opacity: .13; border: 1px dashed #5b967f; border-radius: 3px; }
.mini.final_draw .wall-back-image { filter: hue-rotate(150deg) saturate(1.6); }
.mini.dead .wall-back-image { filter: grayscale(1) brightness(.55); }
.mini.treasure-gap { opacity: .58; border: 2px dashed #edc96d; border-radius: 4px; box-shadow: inset 0 0 5px #edc96d88; }
.mini.returned_treasure .wall-face, .mini.debug-revealed .wall-face { filter: drop-shadow(0 0 4px #efc65d); }
.mini.debug-revealed { opacity: 1; }
.mini.next-draw { z-index: 5; opacity: 1; outline: 3px solid #f4cc58; outline-offset: 2px; box-shadow: 0 0 12px #f4cc58; }
.wall-layer-label { display: none; }

/* 玩家暗牌靠近玩家，未抓牌墙位于暗牌内侧，更接近桌心。 */
.rack { position: absolute; z-index: 7; display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 38px; }
.rack-top { top: 56px; left: 50%; transform: translateX(-50%); }
.rack-bottom { bottom: 56px; left: 50%; transform: translateX(-50%); }
.rack-left { left: 46px; top: 50%; transform: translate(-50%, -50%); flex-direction: column; }
.rack-right { right: 46px; top: 50%; transform: translate(50%, -50%); flex-direction: column; }
.concealed-tiles, .exposed-tiles { display: flex; align-items: center; gap: 2px; }
.rack-left .concealed-tiles, .rack-left .exposed-tiles,
.rack-right .concealed-tiles, .rack-right .exposed-tiles { flex-direction: column; }
.hand-back { display: block; flex: 0 0 24px; width: 24px; height: 38px; object-fit: contain; filter: drop-shadow(1px 2px 2px #00251a); }
.hand-back.drawn { margin-left: 8px; filter: drop-shadow(0 0 4px #e9c861); }
.rack-left .hand-back, .rack-right .hand-back { margin-top: -9px; }
.rack-left .hand-back:first-child, .rack-right .hand-back:first-child { margin-top: 0; }
.rack-left .hand-back.drawn, .rack-right .hand-back.drawn { margin-left: 0; margin-top: 1px; }
.exposed-set { position: relative; display: flex; align-items: center; gap: 1px; margin-left: 7px; padding-top: 9px; }
.exposed-set em { position: absolute; top: -5px; left: 2px; color: #f2d173; font-size: 9px; font-style: normal; font-weight: 800; }
.exposed-set.gang em, .exposed-set.egg em { color: #ffad70; }
.exposed-set .tile-bottom, .exposed-set .tile-top { width: 24px; height: 34px; }
.exposed-set .tile-left, .exposed-set .tile-right { width: 36px; height: 29px; }
.rack-left .exposed-set, .rack-right .exposed-set { flex-direction: column; margin: 8px 0 0; padding: 0 0 0 18px; }
.rack-left .exposed-set em, .rack-right .exposed-set em { top: 50%; left: 0; transform: translateY(-50%); writing-mode: vertical-rl; }
.exposed-set.final-draw-set { margin-left: 7px; padding-left: 7px; border-left: 2px solid #59a9e8; }
.exposed-set.final-draw-set em { color: #74c5ff; }

.center-box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; min-width: 220px; padding: 12px 18px; border: 1px solid #397462; border-radius: 15px; background: #07382ef2; text-align: center; box-shadow: 0 8px 25px #00312699; }
.center-box span, .center-box small { display: block; color: #a9c7bd; font-size: 10px; }
.center-box strong { display: block; margin: 5px 0; color: #f0d17e; font-size: 13px; }
.dice-box { display: flex; justify-content: center; gap: 8px; margin: 7px 0 5px; }
.die { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; color: white; font-size: 17px; box-shadow: inset 0 0 0 2px #ffffff66, 0 2px 5px #001c15; }
.die.red { background: linear-gradient(145deg, #e74d50, #982428); }
.die.blue { background: linear-gradient(145deg, #4d9fe6, #1f5e9e); }
#opening-label { min-height: 14px; color: #d9c482; }
.treasure-label { min-height: 24px; margin: 4px 0; color: #f4d783 !important; }
.treasure-label .tile { display: inline-block; width: 21px; height: 33px; margin: 0 3px; vertical-align: middle; }
.treasure-back { display: inline-block; width: 21px; height: 30px; margin: 0 3px; vertical-align: middle; }
.treasure-back img { display: block; width: 100%; height: 100%; object-fit: contain; }
.turn-timer { margin: 7px auto; width: 150px; }
.timer-row { display: flex; align-items: baseline; justify-content: center; gap: 3px; }
.timer-row b { color: #f4d67e; font-size: 25px; line-height: 1; }
.timer-row span { display: inline; color: #b8d1c8; font-size: 10px; }
.timer-track { height: 5px; margin-top: 5px; overflow: hidden; border-radius: 6px; background: #09261f; box-shadow: inset 0 1px 2px #001813; }
.timer-track i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #d49d3a, #f1d476); transition: width .18s linear; }
.turn-timer.urgent .timer-row b { color: #ff6868; animation: timer-pulse .65s infinite alternate; }
.turn-timer.urgent .timer-track i { background: linear-gradient(90deg, #91252b, #ff6868); }
@keyframes timer-pulse { to { transform: scale(1.16); } }

/* 四家各自独立的弃牌区，牌被吃碰杠后会从原出牌者区域移走。 */
.river { position: absolute; z-index: 5; display: grid; grid-template-columns: repeat(8, 30px); gap: 2px; min-height: 32px; }
.river-top { top: 190px; left: 50%; transform: translateX(-50%); }
.river-bottom { bottom: 190px; left: 50%; transform: translateX(-50%); }
/* 左右玩家的“横排”在他们自己的视角中对应屏幕的竖向：先沿该方向摆满8张，再开第二排。 */
.river-left,
.river-right {
  top: 50%;
  transform: translateY(-50%);
  grid-template-columns: none;
  grid-template-rows: repeat(8, 34px);
  grid-auto-flow: column;
  grid-auto-columns: 42px;
}
.river-left { left: 258px; }
.river-right { right: 258px; }
.river-slot { display: block; align-self: center; justify-self: center; }
.river .tile-bottom, .river .tile-top { width: 30px; height: 42px; }
.river .tile-left, .river .tile-right { width: 42px; height: 34px; }
.river .tile.latest-discard { z-index: 2; border-radius: 4px; outline: 3px solid #f2c94c; box-shadow: 0 0 15px #ffd85f; animation: latest-discard-pulse .75s infinite alternate; }
@keyframes latest-discard-pulse { to { outline-color: #ff765f; box-shadow: 0 0 22px #ff9d55, 1px 3px 3px #001d15; } }
.tile.winning-tile,
.hand button.winning-tile { z-index: 4; border-radius: 4px; outline: 3px solid #ff4048; box-shadow: 0 0 18px #ff3131, 0 0 32px #ffd65a; animation: winning-tile-pulse .65s infinite alternate; }
@keyframes winning-tile-pulse { to { outline-color: #ffd95d; box-shadow: 0 0 24px #ff4545, 0 0 40px #ffe273; } }

.melds { display: flex; gap: 2px; margin-top: 3px; }
.melds .tile { height: 28px; width: 20px; }
.tile { display: block; flex: 0 0 auto; border: 0; background: transparent; box-shadow: none; }
.mahjong-tile-image { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; pointer-events: none; }
.tile-hand { width: 45px; height: 71px; }
.tile-bottom, .tile-top { width: 30px; height: 42px; }
.tile-left, .tile-right { width: 42px; height: 34px; }
.tile.small.tile-hand { width: 28px; height: 44px; }
[data-inspect-tile].same-tile-highlight {
  z-index: 14 !important;
  border-radius: 4px;
  outline: 3px solid #48bfff !important;
  outline-offset: 2px;
  filter: drop-shadow(0 0 8px #38aef5) brightness(1.1) !important;
}
.tile-inspector { position: absolute; z-index: 16; left: 50%; top: calc(50% + 118px); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; min-width: 150px; padding: 7px 8px 7px 13px; border: 2px solid #55bfff; border-radius: 999px; background: #073b36f2; color: #effbff; box-shadow: 0 0 18px #35aef688, 0 7px 18px #001d17aa; opacity: 1; transition: opacity .28s ease, transform .28s ease; pointer-events: auto; }
.tile-inspector.fading { opacity: 0; transform: translate(-50%, 7px); pointer-events: none; }
.tile-inspector span, .tile-inspector strong, .tile-inspector small { display: block; }
.tile-inspector strong { color: #86d6ff; font-size: 14px; }
.tile-inspector small { margin-top: 1px; color: #e8f8ff; font-size: 10px; }
.tile-inspector button { width: 27px; height: 27px; padding: 0; border-radius: 50%; background: #185f58; color: white; font-size: 17px; line-height: 1; }

/* 手牌拖出时，整块己方弃牌区域都是有效投放目标。 */
.hand-discard-drop-zone { position: absolute; z-index: 4; left: 20%; right: 20%; top: 57%; bottom: 8%; display: grid; place-items: center; border: 3px dashed transparent; border-radius: 20px; background: transparent; color: transparent; font-size: 18px; font-weight: 900; letter-spacing: .12em; pointer-events: none; transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease; }
.hand-discard-drop-zone.drag-active { border-color: #58bfff88; background: #228fca12; color: #91dcff; box-shadow: inset 0 0 28px #38aef522; }
.hand-discard-drop-zone.drag-over { border-color: #ffd45f; background: #d7a62925; color: #ffe18a; box-shadow: inset 0 0 38px #f1c84d35, 0 0 20px #f1ca5266; }

/* 许婧文内测看牌：摊开三家暗牌，同时把每摞牌墙的上下两层完全错开。 */
.felt.debug-reveal-mode .concealed-tiles .tile { filter: drop-shadow(1px 2px 3px #001d15); }
.felt.debug-reveal-mode .concealed-tiles .tile.debug-drawn { margin-left: 8px; filter: drop-shadow(0 0 6px #f2cc61); }
.felt.debug-reveal-mode .rack-left .concealed-tiles .tile.debug-drawn,
.felt.debug-reveal-mode .rack-right .concealed-tiles .tile.debug-drawn { margin: 8px 0 0; }
.felt.debug-reveal-mode .wall.top .stack,
.felt.debug-reveal-mode .wall.bottom .stack { height: 88px; }
.felt.debug-reveal-mode .wall.top .mini.bottom-layer,
.felt.debug-reveal-mode .wall.bottom .mini.bottom-layer { left: 0; top: 47px; }
.felt.debug-reveal-mode .wall.left .stack,
.felt.debug-reveal-mode .wall.right .stack { width: 90px; }
.felt.debug-reveal-mode .wall.left .mini.bottom-layer,
.felt.debug-reveal-mode .wall.right .mini.bottom-layer { left: 49px; top: 0; }
.felt.debug-reveal-mode .wall-layer-label {
  position: absolute;
  top: -7px;
  left: -7px;
  z-index: 8;
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  border: 1px solid #ffe08a;
  border-radius: 50%;
  background: #073d32f2;
  color: #ffe08a;
  font: 900 12px/1 "Microsoft YaHei", sans-serif;
  font-style: normal;
  box-shadow: 0 0 7px #f2cc61aa;
  pointer-events: none;
}
.felt.debug-reveal-mode .mini.bottom-layer .wall-layer-label {
  border-color: #8ed8ff;
  color: #8ed8ff;
  box-shadow: 0 0 7px #56bfff99;
}
.felt.debug-reveal-mode .river-top { top: 225px; }
.felt.debug-reveal-mode .river-bottom { bottom: 225px; }
.felt.debug-reveal-mode .river-left { left: 300px; }
.felt.debug-reveal-mode .river-right { right: 300px; }

.control-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; min-height: 124px; padding: 26px 2vw 9px; background: linear-gradient(#0d392fee, #041814); border-top: 1px solid #697d50; display: flex; align-items: flex-end; justify-content: center; gap: 15px; }
.chat-widget { position: fixed; z-index: 48; right: 16px; bottom: 140px; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.chat-toggle { position: relative; min-width: 88px; padding: 9px 13px; border: 1px solid #d4b760; border-radius: 999px; background: linear-gradient(#765420, #4c3517); color: #fff2bd; box-shadow: 0 5px 16px #001b15aa; cursor: pointer; }
.chat-toggle span { margin-right: 5px; }
.chat-unread { position: absolute; top: -7px; right: -5px; min-width: 21px; height: 21px; padding: 0 5px; border: 2px solid #092820; border-radius: 999px; background: #dd4545; color: white; font: 800 11px/17px sans-serif; font-style: normal; }
.chat-panel { width: min(330px, calc(100vw - 24px)); overflow: hidden; border: 1px solid #729b8d; border-radius: 16px; background: #062820f5; box-shadow: 0 16px 38px #00150fcc; backdrop-filter: blur(8px); }
.chat-widget.collapsed .chat-panel { display: none; }
.chat-widget.expanded .chat-toggle { display: none; }
.chat-panel-title { height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 15px; border-bottom: 1px solid #426f60; background: #0b3c31; }
.chat-panel-title strong { color: #f1d47c; font-size: 14px; }
.chat-panel-title button { padding: 5px 9px; border: 1px solid #568171; border-radius: 12px; background: #174d40; color: #e9f4ef; cursor: pointer; font-size: 11px; }
.chat-messages { height: 230px; overflow-x: hidden; overflow-y: auto; padding: 10px 11px; overscroll-behavior: contain; scrollbar-color: #567f70 #092b23; }
.chat-empty { margin: 70px 0 0; color: #86a99c; font-size: 12px; text-align: center; }
.chat-message { margin: 0 0 9px; }
.chat-message:last-child { margin-bottom: 0; }
.chat-message-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; color: #91b6aa; font-size: 10px; }
.chat-message-meta b { max-width: 170px; overflow: hidden; color: #efd17a; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.chat-message.own .chat-message-meta { justify-content: flex-end; }
.chat-message.own .chat-message-meta b { color: #87ddb7; }
.chat-spectator-label { padding: 1px 4px; border-radius: 5px; background: #315d70; color: #d9f4ff; font-style: normal; }
.chat-message p { display: inline-block; max-width: 88%; margin: 0; padding: 7px 9px; border-radius: 4px 12px 12px; background: #164b3e; color: #f1f7f4; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.chat-message.own { text-align: right; }
.chat-message.own p { border-radius: 12px 4px 12px 12px; background: #8b682a; color: #fff8dd; text-align: left; }
.chat-form { display: grid; grid-template-columns: 1fr auto; gap: 7px; padding: 9px; border-top: 1px solid #426f60; background: #082f27; }
.chat-form input { min-width: 0; padding: 9px 10px; border: 1px solid #527c6d; border-radius: 9px; background: #041e19; color: white; outline: none; }
.chat-form input:focus { border-color: #edca6e; box-shadow: 0 0 0 2px #edca6e22; }
.chat-form button { padding: 8px 12px; border: 1px solid #e1c469; border-radius: 9px; background: linear-gradient(#d3a94d, #936923); color: #211707; cursor: pointer; font-weight: 800; }
.status-text { position: absolute; top: 5px; left: 50%; transform: translateX(-50%); font-size: 12px; color: #d6e7e0; }
.hand { display: flex; align-items: flex-end; gap: 3px; }
.hand button { position: relative; width: 45px; height: 71px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #18271f; filter: drop-shadow(2px 4px 3px #001c14); cursor: pointer; touch-action: none; transition: transform .14s ease, filter .14s ease, outline-color .14s ease; }
.hand button .hand-tile-face, .hand button .tile-hand { display: block; width: 100%; height: 100%; }
.hand button.selected { transform: translateY(-11px); filter: drop-shadow(0 0 5px var(--gold)); outline: 2px solid var(--gold); }
.hand button.drawn { margin-left: 12px; filter: drop-shadow(0 0 4px #e8c760); }
.hand button.drawn.selected { transform: translateY(-11px); box-shadow: 0 0 0 4px #fff0a6, 0 0 20px #f2cf61; }
.hand button.dragging { z-index: 40; transform: translate(var(--hand-drag-x, 0), var(--hand-drag-y, 0)) scale(1.06) !important; transition: none; filter: drop-shadow(0 8px 9px #001c14cc) drop-shadow(0 0 7px #70c8ff); }
.hand button.drag-discard-ready { outline: 3px solid #ffcf55; filter: drop-shadow(0 10px 10px #001c14cc) drop-shadow(0 0 13px #ffd55f); }
.drawn-marker { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); min-width: 25px; padding: 2px 5px; border-radius: 10px; background: #d29c36; color: #201506; font-size: 11px; font-weight: 900; box-shadow: 0 2px 7px #001c14; }
.tile-remaining-marker { position: absolute; z-index: 5; right: -9px; bottom: -9px; min-width: 34px; padding: 3px 5px; border: 1px solid #f4d779; border-radius: 10px; background: #173f35; color: #fff1b3; font-size: 10px; font-weight: 900; line-height: 1; box-shadow: 0 2px 8px #001c14cc; }
.hand button.ting-candidate { transform: translateY(-10px); border-color: #63e7ae; box-shadow: 0 0 0 2px #48c78e, 0 0 16px #48c78e99; }
.hand button.ting-candidate.selected, .hand button.ting-candidate.drawn.selected { transform: translateY(-16px); box-shadow: 0 0 0 3px #f6d56f, 0 0 20px #63e7ae; }
.ting-candidate-marker { position: absolute; z-index: 3; top: -29px; left: 50%; transform: translateX(-50%); width: max-content; padding: 3px 6px; border-radius: 10px; background: #16825f; color: #effff8; font-size: 10px; font-weight: 900; box-shadow: 0 2px 8px #001c14; }
.actions { display: flex; gap: 7px; align-items: center; }
.actions button { padding: 11px 14px; }
.actions button.ready-confirmed, .actions button.ready-confirmed:disabled { opacity: 1; border-color: #85efb8; background: linear-gradient(#34a970, #176447); color: #effff6; font-weight: 900; cursor: default; box-shadow: 0 0 0 2px #73e9ab66, 0 0 18px #46d89099; }
.actions .round-record-action { border-color: #d5b75a; background: linear-gradient(#315d50, #163f35); color: #ffe79a; font-weight: 900; box-shadow: 0 0 0 2px #d8bd5c33, 0 0 14px #d8bd5c55; }
.actions .leave-room-action { border-color: #b86c61; background: linear-gradient(#71362f, #44231f); color: #ffe5df; font-weight: 800; }
.actions .danger { background: #722d2d; border-color: #a9554c; }
.actions .ting-action { background: linear-gradient(#e0bc52, #9d6e1c); border-color: #f1d37b; color: #211506; font-weight: 800; }
.actions .ting-action.pending { background: linear-gradient(#8c784a, #594b30); border-color: #b7a16a; color: #fff1bd; }
.actions .egg-action { background: linear-gradient(#b85f3d, #713522); border-color: #df8b67; color: #fff3e9; font-weight: 800; }
.actions .gang-action { background: linear-gradient(#4d76a8, #294766); border-color: #7ca3cd; color: #f2f7ff; font-weight: 800; }
.actions .gu-action { background: linear-gradient(#8f62c7, #533477); border-color: #c79aef; color: #fff5ff; font-weight: 900; }
.toast { position: fixed; z-index: 50; left: 50%; top: 75px; transform: translateX(-50%); max-width: min(720px, 82vw); padding: 10px 18px; border-radius: 10px; background: #7a2c28; color: #fff1e8; box-shadow: 0 8px 25px #0007; line-height: 1.55; text-align: center; }
.spectator-controls { position: static; z-index: 46; display: flex; align-items: center; gap: 9px; flex: 0 1 auto; min-width: 0; padding: 5px 10px; border: 1px solid #77aa98; border-radius: 18px; background: #082e27eF; color: #e9f5ef; box-shadow: 0 3px 10px #001b1588; }
.spectator-controls b { color: #f2cf70; white-space: nowrap; }
.spectator-controls label { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.spectator-controls select { max-width: 150px; padding: 4px 24px 4px 8px; border: 1px solid #548473; border-radius: 13px; background: #0d473a; color: white; }
.spectator-controls small { color: #a9cabe; white-space: nowrap; }
.audio-unlock { position: fixed; z-index: 95; left: 50%; bottom: calc(138px + env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 11px 18px; border: 2px solid #f4d26d; border-radius: 999px; background: #7b4e18f2; color: #fff1bb; font-weight: 900; box-shadow: 0 0 0 5px #f1c94a22, 0 8px 24px #0009; }
.auto-play-animation { position: fixed; z-index: 80; width: 54px; height: 80px; opacity: 0; pointer-events: none; transition: left 1.1s ease, top 1.1s ease, opacity .35s ease, transform .45s ease; transform: scale(.65); }
.auto-play-animation.visible { opacity: 1; transform: scale(1); }
.auto-play-animation.discarding { transform: scale(1.16) rotate(9deg); filter: drop-shadow(0 0 18px #ffcf55); }
.auto-play-animation.egg-supplementing { transform: scale(1.12) rotate(-5deg); filter: drop-shadow(0 0 20px #ffe36b); }
.auto-play-animation.treasure-ganging { transform: scale(1.18) rotate(6deg); filter: drop-shadow(0 0 22px #78bfff); }
.auto-play-animation.egg-supplement-arrived { transform: scale(.78); opacity: .35; filter: drop-shadow(0 0 24px #ffd34e); }
.auto-play-animation.final-draw-arrived { transform: scale(1.12); filter: drop-shadow(0 0 18px #62bfff); }
.auto-play-animation.draw-arrived { transform: scale(1.08); filter: drop-shadow(0 0 16px #f2cf61); }
.auto-play-animation span { display: block; width: 52px; height: 76px; border-radius: 7px; filter: drop-shadow(0 0 12px #f2cf61); }
.auto-play-animation .mahjong-tile-image { width: 100%; height: 100%; }
.auto-play-animation small { position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translateX(-50%); width: max-content; padding: 5px 10px; border-radius: 12px; background: #d29c36; color: #241705; font-size: 13px; font-weight: 900; box-shadow: 0 3px 12px #0009; }

.action-alert { position: absolute; z-index: 65; top: calc(50% - 112px); left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 11px; min-width: 260px; padding: 10px 18px; border: 2px solid #f4d26d; border-radius: 16px; background: #6a4318f2; color: #fff8df; box-shadow: 0 0 0 5px #f1c94a28, 0 10px 35px #0009; cursor: pointer; animation: action-banner-pulse .7s infinite alternate; }
.action-alert .alert-bell { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 32px; border-radius: 50%; background: #f2ce67; color: #4c2d08; font-size: 22px; font-weight: 900; }
.action-alert b, .action-alert small { display: block; text-align: left; }
.action-alert b { color: #fff0b5; font-size: 15px; }
.action-alert small { margin-top: 2px; color: #f1ddaa; font-size: 11px; }
.table-spectator-count { position: absolute; z-index: 24; top: 16px; right: 18px; padding: 7px 12px; border: 1px solid #76aa96; border-radius: 16px; background: #07362ed9; color: #e9f5ef; font-size: 12px; box-shadow: 0 5px 16px #001c1666; }
.treasure-roll-animation { position: fixed; z-index: 75; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 210px; padding: 22px; border: 2px solid #efcb6d; border-radius: 24px; background: #062e26f2; color: #f7dda0; text-align: center; box-shadow: 0 0 0 9999px #001b1699, 0 0 40px #e94b4b88; }
.treasure-roll-animation span, .treasure-roll-animation small { display: block; }
.treasure-roll-animation b { width: 76px; height: 76px; margin: 13px auto 9px; display: grid; place-items: center; border-radius: 16px; background: linear-gradient(145deg, #ee5659, #922126); color: white; font-size: 42px; box-shadow: inset 0 0 0 4px #ffffff66, 0 8px 20px #0008; animation: treasure-die-shake .16s infinite alternate; }
.treasure-roll-animation.settled b { animation: treasure-die-settle .45s both; }
.treasure-roll-animation small { color: #b9d0c7; }
.treasure-roll-animation.return-stage { box-shadow: 0 0 0 9999px #001b1699, 0 0 48px #edc96daa; }
.treasure-roll-animation.reveal-stage { box-shadow: 0 0 0 9999px #001b1699, 0 0 55px #f4cf61bb; }
.treasure-reveal-card { display: grid; place-items: center; width: 72px; height: 104px; margin: 13px auto 9px; border: 4px solid #f2cf61; border-radius: 9px; background: transparent; box-shadow: 0 0 28px #f2cf61cc, 5px 8px 15px #0009; }
.treasure-reveal-card .mahjong-tile-image { width: 100%; height: 100%; }
.treasure-reveal-card.grinding { animation: treasure-card-grind .72s cubic-bezier(.2,.8,.2,1.2) both; }
.treasure-card-back { display: block; width: 82%; height: 88%; object-fit: contain; }
.treasure-flying-tile { position: fixed; z-index: 90; display: grid; place-items: center; width: 54px; height: 82px; border: 3px solid #f2cf61; border-radius: 8px; background: transparent; box-shadow: 0 0 26px #f2cf61, 5px 8px 14px #001c14cc; pointer-events: none; opacity: .88; transition: left .78s cubic-bezier(.2,.75,.2,1), top .78s cubic-bezier(.2,.75,.2,1), transform .78s ease, opacity .78s ease; }
.treasure-flying-tile .mahjong-tile-image { width: 100%; height: 100%; }
.treasure-flying-tile.moving { opacity: 1; transform: scale(1.28) rotate(360deg); }
.treasure-flying-tile.returning.moving { opacity: .25; transform: scale(.52) rotate(-240deg); }
@keyframes treasure-card-grind { 0% { opacity: 0; transform: translateY(-28px) rotate(-14deg) scale(.55); } 55% { opacity: 1; transform: translateY(7px) rotate(5deg) scale(1.12); } 100% { transform: none; } }
@keyframes treasure-die-shake { from { transform: rotate(-12deg) translateX(-4px); } to { transform: rotate(12deg) translateX(4px); } }
@keyframes treasure-die-settle { 50% { transform: scale(1.2) rotate(8deg); } 100% { transform: scale(1); } }
.player-callout { position: fixed; z-index: 74; padding: 7px 14px; border: 1px solid #7ccfff; border-radius: 999px; background: #063e45e8; color: #8ddcff; font: 900 clamp(18px, 2vw, 28px)/1 "STKaiti", "KaiTi", serif; letter-spacing: .12em; text-shadow: 0 0 12px #64cfff; box-shadow: 0 0 18px #48c8ff99; pointer-events: none; animation: player-callout-pop 1.9s ease both; }
.player-callout.callout-top { left: 50%; top: 22%; transform: translate(-50%, -50%); }
.player-callout.callout-right { left: 78%; top: 50%; transform: translate(-50%, -50%); }
.player-callout.callout-bottom { left: 50%; top: 72%; transform: translate(-50%, -50%); }
.player-callout.callout-left { left: 22%; top: 50%; transform: translate(-50%, -50%); }
.player-callout.callout-kind-chi,
.player-callout.callout-kind-peng,
.player-callout.callout-kind-gu,
.player-callout.callout-kind-gang { border-color: #f1cc67; background: #5b3b13ed; color: #ffe08a; text-shadow: 0 0 12px #f0c653; box-shadow: 0 0 20px #e5b84299; }
.player-callout.callout-kind-gu { border-color: #d4a2ff; color: #e7c7ff; text-shadow: 0 0 12px #a96be0; box-shadow: 0 0 20px #9f60d899; }
.player-callout.callout-kind-gang { border-color: #8fc6ff; color: #acd6ff; text-shadow: 0 0 12px #5ba6ed; box-shadow: 0 0 20px #4a98df99; }
.player-callout.callout-kind-egg_supplement { border-color: #ffe16c; background: #64450fed; color: #fff0a2; text-shadow: 0 0 13px #ffd95d; box-shadow: 0 0 22px #efbd3d99; }
@keyframes player-callout-pop { 0% { opacity: 0; scale: .55; } 18%, 72% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1.15; } }
.game.action-needed::after { content: ""; position: fixed; z-index: 55; inset: 5px; border: 5px solid #f1ca54; border-radius: 18px; box-shadow: inset 0 0 28px #f1ca5488, 0 0 25px #f1ca54; pointer-events: none; animation: action-edge-pulse .75s infinite alternate; }
.game.action-needed .table-frame { box-shadow: 0 0 28px #f0c94d, 0 25px 60px #0008; }
.control-panel.action-needed { border-top-color: #f1cf68; box-shadow: 0 -8px 30px #e6b94748; }
.control-panel.action-needed .actions { animation: action-buttons-pulse .65s infinite alternate; }
@keyframes action-banner-pulse { to { transform: translateX(-50%) scale(1.035); box-shadow: 0 0 0 9px #f1c94a18, 0 12px 40px #000a; } }
@keyframes action-edge-pulse { from { opacity: .48; } to { opacity: 1; } }
@keyframes action-buttons-pulse { to { transform: translateY(-4px); filter: brightness(1.18); } }

.win-celebration { position: fixed; z-index: 76; left: 50%; top: 62%; display: flex; align-items: baseline; justify-content: center; gap: 18px; width: min(94vw, 1050px); padding: 18px 28px; transform: translate(-50%, -50%); pointer-events: none; text-align: center; filter: drop-shadow(0 8px 14px #001b15cc); animation: win-celebration-in .34s cubic-bezier(.2, .85, .2, 1.2) both, win-celebration-out .36s ease-in 1.62s forwards; }
.win-celebration.celebration-top { left: 50%; top: 31%; }
.win-celebration.celebration-right { left: 70%; top: 51%; }
.win-celebration.celebration-bottom { left: 50%; top: 70%; }
.win-celebration.celebration-left { left: 30%; top: 51%; }
.win-pattern { font: 900 clamp(38px, 6vw, 86px)/1.05 "STKaiti", "KaiTi", "Microsoft YaHei", serif; letter-spacing: .08em; -webkit-text-stroke: 1px #f9f2de55; text-shadow: 0 2px 0 #001c17, 0 0 20px currentColor; }
.win-pattern.win-level-1 { color: #c1c8c5; }
.win-pattern.win-level-2 { color: #53a9ff; }
.win-pattern.win-level-4 { color: #bd78ff; }
.win-pattern.win-level-16 { color: #ff9a3c; }
.win-pattern.win-level-64 { color: #ff3e46; }
.win-pattern.win-level-rainbow { color: transparent; background: linear-gradient(90deg, #ff334f, #ffbd2e, #56e06f, #4da3ff, #b86cff, #ff334f); background-size: 220% 100%; background-clip: text; -webkit-background-clip: text; -webkit-text-stroke: 1px #fff8; animation: win-rainbow 1s linear infinite; }
.win-method { padding: 8px 15px; border: 1px solid currentColor; border-radius: 999px; background: #003e33d9; font: 900 clamp(20px, 2.8vw, 36px)/1.1 "STKaiti", "KaiTi", serif; letter-spacing: .08em; box-shadow: 0 0 18px currentColor; white-space: nowrap; }
.win-method.method-point-cannon { color: #fff; }
.win-method.method-self-draw { color: #5eacff; }
.win-method.method-treasure { color: #ffd553; }
.win-method.method-dui-bao { color: #ff4a4a; }
@keyframes win-celebration-in { from { opacity: 0; transform: translate(-50%, -35%) scale(.72); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes win-celebration-out { to { opacity: 0; transform: translate(-50%, -62%) scale(1.08); } }
@keyframes win-rainbow { to { background-position: 220% 0; } }

.modal { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 20px; background: #001713c7; backdrop-filter: blur(5px); }
.modal-card { width: min(620px, 94vw); max-height: 88vh; overflow: auto; padding: 25px; border: 1px solid #567e6e; border-radius: 22px; background: linear-gradient(145deg, #0d4438, #072920); box-shadow: 0 30px 90px #000c; }
.modal-card h2 { margin: 2px 0 8px; color: #f1d17b; font: 800 27px serif; }
.modal-card > p { margin: 0 0 18px; color: #afc9bf; font-size: 13px; }
.create-room-card { width: min(460px, 94vw); }
.response-time-field { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 12px; color: #dbe9e3; }
.response-time-field strong { color: #f1d17b; font-size: 25px; }
.response-time-range { width: 100%; accent-color: #d6aa4c; cursor: pointer; }
.response-time-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 14px 0; }
.response-time-presets button { padding: 8px 4px; border: 1px solid #4e806e; border-radius: 9px; background: #0b392f; color: #dbe9e3; cursor: pointer; }
.response-time-presets button.active { border-color: #f1d17b; background: #8f6725; color: #fff4cf; }
.create-room-card > .error { display: block; min-height: 20px; margin: 4px 0 8px; }
.create-room-buttons { display: grid; grid-template-columns: 1fr 1.35fr; gap: 10px; }
.choice-options { display: grid; gap: 9px; margin: 18px 0; }
.choice-options button { display: flex; align-items: center; justify-content: space-between; gap: 15px; width: 100%; padding: 12px 14px; border: 1px solid #4e806e; border-radius: 12px; background: #0b392f; color: #f7f1e5; cursor: pointer; text-align: left; }
.choice-options button:hover { border-color: var(--gold); background: #124b3e; }
.choice-options button > div b, .choice-options button > div small { display: block; }
.choice-options button > div small { margin-top: 4px; color: #a9c9be; font-size: 11px; }
.choice-options button > span { display: flex; gap: 2px; }
.choice-options .ting-tile-preview { align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.choice-options .ting-tile-preview i { margin: 0 3px; color: #f0ca68; font-style: normal; font-size: 12px; font-weight: 900; }
.choice-options .tile { width: 28px; height: 44px; }
.modal-primary, .modal-secondary { width: 100%; padding: 12px; border-radius: 10px; cursor: pointer; }
.modal-primary { border: 1px solid #f3d680; background: linear-gradient(#edcf75, #b37a25); color: #241708; font-weight: 800; }
.modal-primary:disabled { cursor: default; filter: grayscale(.55); opacity: .72; }
.settlement-buttons { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; }
.modal-secondary { border: 1px solid #547769; background: #123c32; color: #dbe9e3; }
.modal-eyebrow { margin: 0 !important; color: #8fb8a8 !important; letter-spacing: .2em; }
.settlement-rows { display: grid; gap: 10px; margin: 19px 0; }
.settlement-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 18px; padding: 13px 15px; border: 1px solid #355f51; border-radius: 13px; background: #082f27; }
.settlement-row div { min-width: 0; }
.settlement-row b { display: block; font-size: 15px; }
.settlement-row span { display: block; margin-top: 5px; color: #aec8be; font-size: 12px; line-height: 1.6; }
.settlement-player { display: flex !important; align-items: center; gap: 9px; margin-top: 0 !important; }
.ting-state { padding: 2px 7px; border-radius: 9px; font-size: 10px; font-style: normal; font-weight: 800; }
.ting-state.reported { background: #946b20; color: #ffe6a0; }
.ting-state.unreported { background: #284b42; color: #b7d0c6; }
.settlement-factors { min-height: 19px; }
.score-parts { display: flex !important; flex-wrap: wrap; gap: 5px 12px; margin-top: 7px !important; }
.score-parts i { color: #f0e5c8; font-style: normal; font-weight: 700; }
.settlement-row strong { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: 25px; }
.settlement-row small { color: #9ebbb0; }
.settlement-row.win strong, .settlement-row.win b { color: #ff6464; }
.settlement-row.lose strong, .settlement-row.lose b { color: #60d98c; }

@media (max-width: 1200px), (orientation: landscape) and (max-height: 700px) {
  .game header { padding: 0 1vw; }
  .header-tools { gap: 4px; }
  .voice-choice { font-size: 0; }
  .voice-choice select { width: 58px; padding: 5px 4px; font-size: 10px; }
  .live-voice-controls { display: flex; gap: 4px; padding: 3px 5px; }
  .live-voice-title, .live-voice-controls > small { display: none; }
  .live-voice-button { min-width: 36px; width: 36px; padding: 3px; }
  .live-voice-button span { margin: 0; }
  .live-voice-button b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .connection { display: none; }
  .room-pill { padding-left: 9px; }
  .room-pill strong { margin: 0 4px; font-size: 14px; }
  .room-pill button { padding: 5px 7px; font-size: 10px; }
  .win-celebration { top: 59%; flex-direction: column; align-items: center; gap: 10px; }
  .actions button { padding: 9px; }
  .brand b { display: none; }
}

/* 手机横屏使用固定的桌面牌桌画布再整体等比缩放。这样墙牌、手牌和弃牌区
   之间的相对位置完全一致，不会因为手机屏幕较矮而各自挤到一起。 */
@media (max-width: 760px) {
  .icp-footer {
    width: calc(100% - 24px);
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 14px;
    font-size: 11px;
  }
  .icp-footer span {
    white-space: normal;
  }
}

.mobile-table-layout {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
.mobile-table-layout body {
  position: fixed;
  inset: 0;
  width: 100%;
  height: var(--mobile-viewport-height, 100svh);
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
}
.mobile-table-layout .game {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
.mobile-table-layout .icp-footer {
  display: none;
}
.mobile-table-layout .game header {
  position: absolute;
  z-index: 30;
  top: max(3px, env(safe-area-inset-top));
  left: max(5px, env(safe-area-inset-left));
  right: max(5px, env(safe-area-inset-right));
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
}
.mobile-table-layout .game header > * { pointer-events: auto; }
.mobile-table-layout .brand { display: none; }
.mobile-table-layout .room-pill {
  position: absolute;
  left: 50%;
  padding: 4px 7px 4px 10px;
  white-space: nowrap;
  transform: translateX(-50%);
  background: #0e3a31d9;
  backdrop-filter: blur(5px);
}
.mobile-table-layout .room-pill strong { font-size: 14px; }
.mobile-table-layout .header-tools { min-width: 0; margin-left: auto; }
.mobile-table-layout .debug-wall-toggle { padding: 5px 8px; font-size: 10px; }
.mobile-table-layout .table-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 2px;
  border-width: 2px;
  border-radius: 0;
}
.mobile-table-layout .felt { border-radius: 0; }
.mobile-table-layout .felt-surface {
  inset: auto;
  left: 50%;
  top: 50%;
  width: var(--mobile-canvas-width, 1160px);
  height: var(--mobile-canvas-height, 510px);
  transform: translate(-50%, -50%) scale(var(--mobile-table-scale, .65));
  transform-origin: center;
}
.mobile-table-layout .control-panel {
  min-height: calc(82px + env(safe-area-inset-bottom));
  padding: 18px max(8px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  gap: 8px;
  border: 0;
  background: linear-gradient(180deg, transparent, #06231dcc 30%, #041814 100%);
  pointer-events: none;
}
.mobile-table-layout .control-panel > * { pointer-events: auto; }
.mobile-table-layout .status-text { top: 3px; width: 94vw; overflow: hidden; font-size: 10px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.mobile-table-layout .spectator-controls { position: static; padding: 4px 8px; gap: 5px; font-size: 10px; transform: none; }
.mobile-table-layout .spectator-controls select { max-width: 100px; padding: 3px 18px 3px 5px; font-size: 10px; }
.mobile-table-layout .spectator-controls small { font-size: 9px; }
.mobile-table-layout .hand { min-width: 0; gap: 1px; }
.mobile-table-layout .hand button { width: clamp(24px, 4.05vw, 39px); height: clamp(38px, 6.4vw, 62px); touch-action: none; }
.mobile-table-layout .hand button.drawn { margin-left: clamp(3px, 1vw, 9px); }
.mobile-table-layout .hand button.selected { transform: translateY(-7px); }
.mobile-table-layout .actions { flex: 0 0 auto; gap: 4px; }
.mobile-table-layout .actions button { padding: 8px 9px; font-size: 11px; white-space: nowrap; }
.mobile-table-layout .drawn-marker { top: -15px; min-width: 20px; padding: 1px 3px; font-size: 8px; }
.mobile-table-layout .tile-remaining-marker { right: -5px; bottom: -5px; min-width: 25px; padding: 2px 3px; font-size: 8px; }
.mobile-table-layout .ting-candidate-marker { top: -21px; padding: 2px 4px; font-size: 8px; }
.mobile-table-layout .action-alert { top: calc(50% - 100px); min-width: 220px; padding: 7px 12px; font-size: 11px; }
.mobile-table-layout .table-spectator-count { top: 8px; right: 8px; padding: 4px 8px; font-size: 9px; }
.mobile-table-layout .audio-unlock { bottom: calc(98px + env(safe-area-inset-bottom)); font-size: 12px; }
.mobile-table-layout .chat-widget { right: max(7px, env(safe-area-inset-right)); bottom: calc(88px + env(safe-area-inset-bottom)); }
.mobile-table-layout .chat-toggle { min-width: 72px; padding: 7px 10px; font-size: 11px; }
.mobile-table-layout .chat-panel { width: min(300px, calc(100vw - 14px)); }
.mobile-table-layout .chat-messages { height: min(190px, 38vh); }
.mobile-table-layout .toast { top: 54px; }
.mobile-table-layout .modal { padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
.mobile-table-layout .modal-card { max-height: calc(var(--mobile-viewport-height, 100svh) - 16px); padding: 14px; }

/* 竖屏使用纵向牌桌坐标：四家、牌墙和弃牌区都重新排布，不旋转文字和牌面。 */
.mobile-table-portrait .game header { height: 70px; }
.mobile-table-portrait .room-pill { top: 0; }
.mobile-table-portrait .header-tools { position: absolute; top: 36px; right: 0; }
.mobile-table-portrait .voice-choice { font-size: 10px; }
.mobile-table-portrait .voice-choice select { padding: 4px 20px 4px 7px; }
.mobile-table-portrait .live-voice-controls { height: 28px; padding: 1px 5px; }
.mobile-table-portrait .live-voice-button { width: 32px; min-width: 32px; height: 24px; }
.mobile-table-portrait .pos-top { top: 138px; }
.mobile-table-portrait .pos-bottom { left: 27%; bottom: 178px; }
.mobile-table-portrait .pos-left { left: 2px; transform: translateY(-50%) scale(.60); transform-origin: left center; }
.mobile-table-portrait .pos-right { right: 2px; transform: translateY(-50%) scale(.60); transform-origin: right center; }
.mobile-table-portrait .wall.top { top: 252px; transform: translateX(-50%) scale(.82); }
.mobile-table-portrait .wall.bottom { bottom: 292px; transform: translateX(-50%) scale(.82); }
.mobile-table-portrait .wall.left { left: 25px; transform: translateY(-50%) scale(.84); }
.mobile-table-portrait .wall.right { right: 25px; transform: translateY(-50%) scale(.84); }
.mobile-table-portrait .rack-top { top: 184px; }
.mobile-table-portrait .rack-bottom { bottom: 232px; }
.mobile-table-portrait .rack-left { left: 0; }
.mobile-table-portrait .rack-right { right: 0; }
.mobile-table-portrait .river-top { top: 372px; transform: translateX(-50%) scale(.86); }
.mobile-table-portrait .river-bottom { bottom: 382px; transform: translateX(-50%) scale(.86); }
.mobile-table-portrait .river-left {
  left: 88px;
  transform: translateY(-50%) scale(.62);
  transform-origin: left center;
}
.mobile-table-portrait .river-right {
  right: 88px;
  transform: translateY(-50%) scale(.62);
  transform-origin: right center;
}
.mobile-table-portrait .center-box { min-width: 180px; padding: 10px 8px; transform: translate(-50%, -50%) scale(.65); }
.mobile-table-portrait .control-panel {
  min-height: calc(112px + env(safe-area-inset-bottom));
  padding-top: 18px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
}
.mobile-table-portrait .hand { justify-content: center; gap: 1px; }
.mobile-table-portrait .hand button { width: clamp(20px, 6vw, 25px); height: clamp(32px, 9.6vw, 40px); }
.mobile-table-portrait .hand button.drawn { margin-left: 3px; }
.mobile-table-portrait .actions { justify-content: center; gap: 4px; }
.mobile-table-portrait .actions button { padding: 6px 8px; font-size: 10px; }
.mobile-table-portrait .audio-unlock { bottom: calc(116px + env(safe-area-inset-bottom)); }
.mobile-table-portrait .chat-widget { bottom: calc(118px + env(safe-area-inset-bottom)); }
.mobile-table-portrait .chat-messages { height: min(240px, 38vh); }
.mobile-table-portrait .action-alert { top: calc(50% - 92px); }
.mobile-table-portrait .toast { top: 74px; }
.mobile-table-portrait .tile-inspector { top: calc(50% + 100px); min-width: 126px; padding: 5px 6px 5px 10px; }
.mobile-table-portrait .tile-inspector strong { font-size: 11px; }
.mobile-table-portrait .tile-inspector small { font-size: 9px; }
.mobile-table-portrait .tile-inspector button { width: 22px; height: 22px; font-size: 14px; }
.mobile-table-portrait .hand-discard-drop-zone { left: 18%; right: 18%; top: 56%; bottom: 17%; }

/* 手机端保留单指操作，但禁止双击麻将牌或按钮时触发浏览器页面放大。 */
.mobile-table-layout,
.mobile-table-layout body,
.mobile-table-layout .game,
.mobile-table-layout button,
.mobile-table-layout .tile { touch-action: manipulation; }

@media (hover: none) and (pointer: coarse) {
  .mobile-install-help { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .action-alert, .game.action-needed::after, .control-panel.action-needed .actions, .live-voice-badge.speaking { animation: none; }
}