/* 家庭麻将 · 样式沿用家庭掼蛋 v5（清新绿桌），以下前半段取自掼蛋样式表，末尾为麻将专用部分 */
:root {
  --font-ui: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-rank: "Times New Roman", Georgia, "Songti SC", serif;
  --font-brush: "Kaiti SC", "STKaiti", "KaiTi", "楷体", serif;
}
body[data-skin="classic"] {
  --felt-a: #5fbcab; --felt-b: #4da597; --felt-c: #3e8f82; --felt-d: #347a6f;
  --ray: rgba(255, 255, 255, .10);
  --wm: rgba(10, 60, 50, .20); --wm-info: rgba(10, 60, 50, .45);
  --bar: linear-gradient(180deg, rgba(14, 58, 52, .92), rgba(8, 36, 32, .96));
  --panel-dark: rgba(10, 30, 40, .72);
  --back-1: #3a7bd5; --back-2: #234c9a; --back-line: rgba(255, 255, 255, .35);
  --card-face: linear-gradient(180deg, #ffffff 0%, #fbfbfb 70%, #f0f0f0 100%);
  --lobby-sky: linear-gradient(180deg, #16244f 0%, #33307a 45%, #8a4f86 75%, #f09a6a 100%);
}
body[data-skin="teahouse"] {
  --felt-a: #3f8a62; --felt-b: #2c6e4c; --felt-c: #1d5038; --felt-d: #123726;
  --ray: rgba(255, 230, 170, .08);
  --wm: rgba(255, 240, 200, .10); --wm-info: rgba(255, 240, 200, .38);
  --bar: linear-gradient(180deg, rgba(74, 38, 17, .95), rgba(44, 20, 7, .97));
  --panel-dark: rgba(44, 20, 7, .78);
  --back-1: #9c1f26; --back-2: #5e0f15; --back-line: rgba(232, 196, 110, .5);
  --card-face: linear-gradient(170deg, #fffdf5 0%, #f7efdc 70%, #efe2c4 100%);
  --lobby-sky: linear-gradient(180deg, #2a1407 0%, #5a2a12 50%, #a8552a 85%, #e8a35a 100%);
}
body[data-skin="arena"] {
  --felt-a: #2c3f86; --felt-b: #1e2b62; --felt-c: #141c44; --felt-d: #0a0f28;
  --ray: rgba(53, 224, 255, .07);
  --wm: rgba(53, 224, 255, .10); --wm-info: rgba(183, 246, 255, .4);
  --bar: linear-gradient(180deg, rgba(20, 26, 60, .94), rgba(8, 10, 28, .97));
  --panel-dark: rgba(10, 14, 36, .8);
  --back-1: #6a3dff; --back-2: #24106e; --back-line: rgba(53, 224, 255, .5);
  --card-face: linear-gradient(180deg, #ffffff 0%, #f1f4fb 75%, #e3e8f5 100%);
  --lobby-sky: linear-gradient(180deg, #05060f 0%, #1a1450 50%, #4a1a6a 80%, #a8306a 100%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0c2a25; color: #fff; font-family: var(--font-ui); }
button { font-family: inherit; cursor: pointer; border: none; }
.hidden { display: none !important; }
#viewport { position: fixed; inset: 0; overflow: hidden; background: #0c2a25; }
#stage { position: absolute; left: 0; top: 0; width: 1280px; height: 800px; transform-origin: 0 0; overflow: hidden; }
.screen { position: absolute; inset: 0; }

/* —— 立体胶囊按钮（参考：黄“不出”、蓝“提示”）—— */
.gbtn {
  position: relative; padding: 10px 22px; border-radius: 14px; font-size: 17px; font-weight: 800; letter-spacing: 2px;
  color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .25); transition: transform .08s, filter .15s;
  box-shadow: 0 4px 0 var(--b-shadow, #a35f00), 0 6px 12px rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .55);
  background: var(--b-bg);
}
.gbtn::after { content: ""; position: absolute; left: 8px; right: 8px; top: 3px; height: 40%; border-radius: 10px 10px 18px 18px; background: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0)); pointer-events: none; }
.gbtn:hover { filter: brightness(1.06); }
.gbtn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--b-shadow), 0 2px 6px rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .5); }
.gbtn:disabled { --b-bg: linear-gradient(180deg, #f2f2f2, #c9c9c9) !important; --b-shadow: #8d8d8d !important; color: #8a8a8a; text-shadow: none; cursor: default; filter: none; }
.gbtn.yellow { --b-bg: linear-gradient(180deg, #ffe680 0%, #ffc928 55%, #f5a90a 100%); --b-shadow: #b9730a; color: #7a3e00; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.gbtn.blue { --b-bg: linear-gradient(180deg, #b9ecff 0%, #5cc4fb 55%, #2b97ea 100%); --b-shadow: #1b65a8; color: #0b3e78; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.gbtn.orange { --b-bg: linear-gradient(180deg, #ffb27a 0%, #ff7a3a 55%, #ee4f1c 100%); --b-shadow: #a8340d; }
.gbtn.green { --b-bg: linear-gradient(180deg, #a5f08a 0%, #4fcf55 55%, #25a43a 100%); --b-shadow: #17702a; }
.gbtn.gray { --b-bg: linear-gradient(180deg, #fafafa, #d4d4d4); --b-shadow: #8d8d8d; color: #555; text-shadow: none; }
.gbtn.small { padding: 7px 14px; font-size: 14px; letter-spacing: 1px; border-radius: 11px; }
.gbtn.xl { min-width: 168px; height: 58px; font-size: 24px; letter-spacing: 8px; border-radius: 16px; }
.gbtn.huge { width: 100%; height: 64px; font-size: 26px; letter-spacing: 10px; border-radius: 18px; margin-top: 6px; }

/* —— 大厅 v3：参考图加载页插画铺满，上半露出人物，下半三块亮白面板 —— */
#lobby { background: #2a2350; overflow: hidden; }
.lobby-bg { position: absolute; inset: 0; background: url("img/lobby_bg.jpg") center top / cover no-repeat; }
.lobby-bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20, 16, 50, .35) 0%, rgba(20, 16, 50, 0) 18%, rgba(20, 16, 50, 0) 40%, rgba(255, 210, 150, .25) 60%, rgba(255, 236, 205, .55) 100%); }
.av-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }

.lobby-head { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: flex-start; padding: 16px 26px; z-index: 5; }
/* 标题：粗圆体 + 亮黄到橙渐变 + 橙红细描边 + 厚白外边 + 橙棕立体投影（参考图 logo 的做法）*/
.logo { display: flex; align-items: flex-end; gap: 4px; isolation: isolate; padding: 4px 6px; }
.logo span { position: relative; display: inline-block; font-family: "Yuanti SC", "PingFang SC", "Microsoft YaHei", sans-serif; font-weight: 900; line-height: 1.05;
  background: linear-gradient(180deg, #fffde6 0%, #fff07a 30%, #ffc727 58%, #ff8a1a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 2px #e0560c; }
.logo span::before { content: attr(data-t); position: absolute; left: 0; top: 0; z-index: -1; color: #ffffff; -webkit-text-stroke: 12px #ffffff;
  text-shadow: 0 6px 0 #c4520c, 0 7px 0 #a8420a, 0 12px 18px rgba(60, 20, 0, .45); }
.logo-small { font-size: 38px; margin-bottom: 10px; transform: rotate(-6deg); }
.logo-big { font-size: 74px; letter-spacing: 3px; }
.head-right { display: flex; gap: 12px; align-items: center; }
#me-box { display: flex; gap: 10px; align-items: center; background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 240, 210, .95)); padding: 5px 10px 5px 5px; border-radius: 40px; box-shadow: 0 4px 0 rgba(0, 0, 0, .15), 0 8px 18px rgba(0, 0, 0, .25); color: #4a2a10; }
#me-box input { background: #fff; border: 2px solid #f0c060; color: #333; padding: 8px 14px; border-radius: 20px; font-size: 15px; width: 150px; outline: none; }
#me-box .me-av { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(180deg, #ffe9a8, #ffc24a); display: grid; place-items: center; font-size: 32px; cursor: pointer; border: 3px solid #ffb21a; overflow: hidden; }
#me-box b { font-size: 19px; }
#me-box .me-pts { font-size: 13px; color: #b36a00; font-weight: 800; }
.av-pop { position: absolute; z-index: 50; top: 84px; right: 120px; background: #fff; border-radius: 18px; padding: 12px; display: grid; grid-template-columns: repeat(6, 56px); gap: 8px; box-shadow: 0 12px 30px rgba(0, 0, 0, .4); }
.av-pop button { width: 56px; height: 56px; border-radius: 14px; font-size: 32px; background: #f3f5f8; overflow: hidden; padding: 0; }
.av-pop button.on { box-shadow: 0 0 0 3px #f5a90a; }

#save-box { position: absolute; left: 50%; top: 318px; transform: translateX(-50%); z-index: 6; }
.save-card { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 20px; border-radius: 30px; background: linear-gradient(180deg, #fff8e0, #ffe6a8); border: 3px solid #fff; box-shadow: 0 4px 0 rgba(0, 0, 0, .15), 0 10px 20px rgba(0, 0, 0, .3); color: #6b3a00; font-size: 14px; font-weight: 700; white-space: nowrap; }
.save-card .row { display: flex; gap: 8px; }

.lobby-body { position: absolute; left: 26px; right: 26px; bottom: 14px; height: 400px; display: grid; grid-template-columns: 372px 1fr 372px; gap: 18px; z-index: 4; }
.card-panel { position: relative; background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(255, 246, 228, .97)); border-radius: 24px; padding: 34px 18px 14px; color: #3d2a17; box-shadow: 0 6px 0 rgba(150, 90, 30, .25), 0 16px 32px rgba(0, 0, 0, .3); border: 3px solid #fff; }
.ribbon { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); padding: 7px 38px; font-size: 21px; font-weight: 900; color: #fff; border-radius: 14px; letter-spacing: 4px; white-space: nowrap; text-shadow: 0 2px 0 rgba(0, 0, 0, .22); box-shadow: 0 4px 0 rgba(0, 0, 0, .18), inset 0 2px 0 rgba(255, 255, 255, .45); }
.ribbon small { font-size: 12px; letter-spacing: 0; font-weight: 700; opacity: .9; }
.ribbon.green { background: linear-gradient(180deg, #7fe56f, #2fb045); }
.ribbon.blue { background: linear-gradient(180deg, #74d0ff, #2b8ee8); }
.ribbon.orange { background: linear-gradient(180deg, #ffb46a, #f2701f); }
.hint-text { color: #9a7d58; font-size: 12px; text-align: center; margin-bottom: 2px; }
.mini-table { position: relative; width: 330px; height: 236px; margin: 0 auto; }
.mini-felt { position: absolute; left: 105px; top: 70px; width: 120px; height: 96px; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, #6ccbb6, #2f8b7d 85%); border: 6px solid #b77a3e; box-shadow: inset 0 0 14px rgba(0, 0, 0, .3), 0 5px 10px rgba(0, 0, 0, .2); display: grid; place-items: center; text-align: center; color: rgba(255, 255, 255, .85); font-size: 11px; line-height: 1.6; font-weight: 700; }
.mini-seat { position: absolute; width: 100px; height: 74px; border-radius: 16px; cursor: pointer; background: #fff; border: 2px dashed #e0cba5; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: transform .12s; box-shadow: 0 3px 0 rgba(0, 0, 0, .06); }
.mini-seat:hover { transform: translateY(-2px); }
.mini-seat[data-seat="0"] { left: 115px; top: 162px; } .mini-seat[data-seat="2"] { left: 115px; top: 0; }
.mini-seat[data-seat="1"] { left: 230px; top: 81px; } .mini-seat[data-seat="3"] { left: 0; top: 81px; }
.mini-seat .ms-av { width: 38px; height: 38px; border-radius: 10px; overflow: hidden; font-size: 28px; line-height: 38px; text-align: center; }
.mini-seat .ms-name { font-size: 13px; font-weight: 800; margin-top: 2px; color: #3d2a17; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-seat .ms-dir { position: absolute; top: 3px; right: 6px; font-size: 10px; color: #b39a76; }
.mini-seat.human { border: 2px solid #f5a90a; background: linear-gradient(180deg, #fffaf0, #ffefc4); }
.mini-seat.mine { box-shadow: 0 0 0 3px #ff7a3a, 0 6px 14px rgba(255, 122, 58, .35); }
.mini-seat.ai .ms-name { color: #8a7458; font-weight: 600; }
.preset-row { display: flex; gap: 8px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.preset-row .gbtn { padding: 8px 16px; font-size: 15px; }
#viewers { margin-top: 4px; text-align: center; color: #9a7d58; font-size: 12px; }
.mode-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 4px; }
.mode-card { position: relative; padding: 8px 12px 8px 66px; border-radius: 16px; cursor: pointer; border: 3px solid #fff; min-height: 66px; transition: transform .12s; color: #fff; box-shadow: 0 4px 0 rgba(0, 0, 0, .15); }
.mode-card::before { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .3); display: grid; place-items: center; font-size: 26px; }
.mode-card[data-mode="score"] { background: linear-gradient(180deg, #ffc05a, #ff8a1e); }
.mode-card[data-mode="score"]::before { content: "🏆"; }
.mode-card[data-mode="level"] { background: linear-gradient(180deg, #8fd6ff, #3b8fe8); }
.mode-card[data-mode="level"]::before { content: "🎯"; }
.mode-card b { display: block; font-size: 19px; margin-bottom: 2px; text-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
.mode-card span { font-size: 11.5px; line-height: 1.45; opacity: .95; display: block; }
.mode-card:not(.on) { filter: saturate(.25) brightness(1.05); opacity: .7; }
.mode-card.on { transform: translateY(-2px); box-shadow: 0 0 0 3px #ffd25c, 0 6px 0 rgba(0, 0, 0, .15); }
.opt-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px; border-top: 1px dashed #ecdcbc; font-size: 15px; font-weight: 800; }
.seg { display: flex; background: #f3e8d0; border-radius: 12px; padding: 3px; gap: 2px; }
.seg button { background: transparent; color: #8a7458; padding: 6px 12px; font-size: 13.5px; font-weight: 800; border-radius: 9px; }
.seg button.on { background: linear-gradient(180deg, #ffd25c, #f5a90a); color: #6b3a00; box-shadow: 0 2px 0 #b9730a; }
.ai-note { font-size: 12px; color: #8a7458; line-height: 1.5; padding: 3px 2px 4px; min-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-note b { color: #2fae45; } .ai-note b.warn { color: #e2602a; }
.switch { position: relative; width: 50px; height: 28px; display: inline-block; }
.switch input { display: none; }
.switch i { position: absolute; inset: 0; background: #ddcfb2; border-radius: 14px; transition: .2s; cursor: pointer; }
.switch i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: .2s; box-shadow: 0 2px 3px rgba(0, 0, 0, .2); }
.switch input:checked + i { background: #4fcf55; }
.switch input:checked + i::after { left: 25px; }
.gbtn.huge { width: 100%; height: 56px; font-size: 27px; letter-spacing: 14px; border-radius: 16px; margin-top: 2px; }
#board-list .row { display: grid; grid-template-columns: 24px 42px 1fr 56px; align-items: center; padding: 6px 2px; border-bottom: 1px dashed #ecdcbc; gap: 6px; }
#board-list .rk { font-family: var(--font-rank); color: #f2701f; font-size: 20px; font-weight: bold; text-align: center; }
#board-list .av { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(180deg, #ffe9a8, #ffc24a); display: grid; place-items: center; font-size: 25px; overflow: hidden; border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .15); }
#board-list .nm { font-size: 15px; font-weight: 800; }
#board-list .sub { font-size: 11px; color: #8a7458; font-weight: 400; margin-top: 1px; }
#board-list .pt { text-align: right; font-size: 22px; font-family: var(--font-rank); font-weight: bold; }
.title-badge { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 8px; margin-left: 6px; background: linear-gradient(180deg, #8fd3ff, #2b97ea); color: #fff; font-weight: 700; vertical-align: 2px; }
.card-panel .pos { color: #2fae45; } .card-panel .neg { color: #e2453a; }
.card-panel h3 { font-size: 14px; margin: 8px 0 4px; color: #f2701f; letter-spacing: 2px; }
.h2h { background: linear-gradient(180deg, #fff, #fff6e6); border-radius: 12px; padding: 6px 10px; margin-bottom: 6px; font-size: 12px; line-height: 1.6; border: 1px solid #f0dfbd; }
.h2h .vs { font-size: 15px; font-weight: 800; text-align: center; }
.h2h .vs b { color: #f2701f; font-size: 22px; font-family: var(--font-rank); margin: 0 10px; }
.empty { color: #a08a6a; font-size: 12.5px; padding: 6px 0; }
.rules-brief { font-size: 11.5px; color: #8a7458; line-height: 1.6; margin-top: 4px; }
.rules-brief summary { cursor: pointer; color: #2b8ee8; font-weight: 700; }

/* —— 牌桌 v5：按参考图（天天爱掼蛋，1600 宽）逐项测量，横向 ×0.8 换算到 1280 宽；颜色取自参考图 ——
   桌面 #429080→#367469；底栏 #2b3d41、梯形 #232a30；名牌 #214949；副数面板 #2e3257 */
:root { --font-round: "Yuanti SC", "YouYuan", "PingFang SC", "Microsoft YaHei", sans-serif; }
body[data-skin="classic"] { --felt-a: #47998a; --felt-b: #42907f; --felt-c: #3b8073; --felt-d: #326c62; }
#table { background: linear-gradient(90deg, #7a7663 0%, #66645a 45%, #4a4c4f 75%, #3e4247 100%); }
body[data-skin="teahouse"] #table { background: radial-gradient(ellipse 120% 80% at 50% -10%, #5a3a22 0%, #2e1a0c 60%, #160b04 100%); }
body[data-skin="arena"] #table { background: radial-gradient(ellipse 120% 80% at 50% -10%, #23285a 0%, #0d1030 60%, #05061a 100%); }
.felt {
  position: absolute; left: -60px; right: -60px; top: 14px; bottom: -120px;
  border-radius: 50% 50% 0 0 / 150px 150px 0 0;
  background: radial-gradient(ellipse 66% 62% at 50% 52%, var(--felt-a) 0%, var(--felt-b) 42%, var(--felt-c) 78%, var(--felt-d) 100%);
  box-shadow: 0 -2px 0 rgba(255, 255, 255, .14), 0 -9px 0 rgba(30, 40, 38, .55), inset 0 14px 24px -8px rgba(0, 0, 0, .3);
  overflow: hidden;
}
.felt::before { content: ""; position: absolute; inset: 0; opacity: .5;
  background: repeating-radial-gradient(circle at 40% 30%, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .02) 0 1px, transparent 1px 4px); }
.window { position: absolute; left: 10px; top: -170px; width: 620px; height: 640px; transform: rotate(-30deg) skewX(-18deg); opacity: .36; filter: blur(14px);
  background:
    linear-gradient(90deg, transparent 46%, rgba(10, 50, 40, .85) 46% 54%, transparent 54%),
    linear-gradient(0deg, transparent 46%, rgba(10, 50, 40, .85) 46% 54%, transparent 54%),
    linear-gradient(160deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .3) 60%, rgba(255, 255, 255, 0) 100%);
  -webkit-mask-image: radial-gradient(ellipse at 30% 30%, #000 25%, transparent 72%); mask-image: radial-gradient(ellipse at 30% 30%, #000 25%, transparent 72%); pointer-events: none; }
body[data-skin="arena"] .window { opacity: .12; }
.vignette { position: absolute; inset: 0; box-shadow: inset 0 0 120px rgba(0, 0, 0, .18); pointer-events: none; }
/* 水印：参考图 logo 在桌面中部，颜色只比桌面略深；下面两行深绿字 */
.watermark { position: absolute; left: 50%; top: 158px; transform: translateX(-50%); text-align: center; pointer-events: none; user-select: none; transition: opacity .3s; }
.wm-logo { position: relative; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-brush); font-weight: 900; line-height: 1; white-space: nowrap; }
.wm-logo .stamp { width: 50px; height: 50px; border-radius: 50%; border: 3px solid var(--wm-line); color: var(--wm-fill); display: grid; place-items: center; font-size: 22px; transform: rotate(-12deg); }
.wm-logo .big { font-size: 96px; letter-spacing: 2px; color: var(--wm-fill); -webkit-text-stroke: 3px var(--wm-line); text-shadow: 0 2px 0 rgba(255, 255, 255, .07); }
.wm-info { margin-top: 10px; font-size: 26px; color: var(--wm-text); font-weight: 500; letter-spacing: 3px; white-space: nowrap; font-family: var(--font-round); }
.wm-info2 { margin-top: 2px; font-size: 22px; color: var(--wm-text); font-weight: 500; letter-spacing: 1px; white-space: nowrap; font-family: var(--font-round); }
body[data-skin="classic"] { --wm-fill: rgba(40, 120, 104, .55); --wm-line: rgba(28, 86, 74, .55); --wm-text: rgba(30, 72, 64, .82); }
body[data-skin="teahouse"] { --wm-fill: rgba(20, 60, 40, .55); --wm-line: rgba(12, 40, 26, .6); --wm-text: rgba(255, 240, 200, .45); }
body[data-skin="arena"] { --wm-fill: rgba(53, 224, 255, .10); --wm-line: rgba(53, 224, 255, .25); --wm-text: rgba(183, 246, 255, .45); }

/* 左上：菜单（玻璃圆钮 Ø64）+ 我方/对方（52×58）+ 副数面板（158×61，参考“倍数”）*/
#tl { position: absolute; left: 44px; top: 8px; display: flex; gap: 8px; align-items: flex-start; z-index: 20; }
.round-btn { width: 64px; height: 64px; border-radius: 50%; margin-right: 10px; background: radial-gradient(circle at 40% 30%, rgba(255, 255, 255, .95), rgba(225, 235, 242, .9) 60%, rgba(180, 200, 214, .85)); box-shadow: 0 0 0 3px rgba(255, 255, 255, .45), 0 4px 10px rgba(0, 0, 0, .35); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.round-btn i { display: block; width: 28px; height: 4px; border-radius: 2px; background: #3a5f8a; }
.lvbox { width: 52px; border-radius: 4px; overflow: hidden; background: linear-gradient(180deg, #ffffff, #ececf0); box-shadow: 0 2px 0 rgba(0, 0, 0, .3); text-align: center; position: relative; margin-top: 4px; }
.lvbox b { display: block; background: linear-gradient(180deg, #6e86c8, #5367a4); color: #fff; font-size: 14px; padding: 2px 0; letter-spacing: 1px; font-family: var(--font-round); }
.lvbox.opp b { background: linear-gradient(180deg, #f6b25a, #ea9739); }
.lvbox span { display: block; font-family: var(--font-round); font-weight: 600; font-size: 30px; color: #3a415e; line-height: 38px; }
.lvbox.opp span { color: #d9782a; }
.lvbox.cur { overflow: visible; }
.lvbox.cur::after { content: ""; position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%); border: 6px solid transparent; border-bottom-color: #fff; }
.infobox { width: 158px; height: 61px; margin-left: 8px; border-radius: 4px; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 4px), linear-gradient(180deg, #353a66, #2e3257 60%, #262a4c); border: 2px solid #4a5894; box-shadow: 0 2px 0 rgba(0, 0, 0, .3); padding: 2px 8px; text-align: center; font-family: var(--font-round); }
.infobox .ib-t { font-size: 16px; color: #fff; }
.infobox .ib-v { font-size: 26px; font-weight: 700; color: #ffe066; line-height: 30px; }
.infobox .ib-v small { font-size: 16px; color: #ffe066; }
/* 右上：对局 x/x、记牌器（参考位置约 x=892～1032）*/
#tr { position: absolute; left: 884px; top: 2px; display: flex; gap: 12px; z-index: 20; }
.icon-btn { position: relative; width: 72px; height: 70px; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .35)); }
.icon-btn span { font-size: 42px; line-height: 1; }
.icon-btn em { position: absolute; bottom: 2px; font-style: normal; font-size: 16px; font-weight: 900; color: #fff4c8; -webkit-text-stroke: 1px #5a3010; paint-order: stroke fill; white-space: nowrap; font-family: var(--font-round); }
.icon-btn.on span { filter: drop-shadow(0 0 8px #ffd25c); }
#menu { position: absolute; left: 44px; top: 78px; z-index: 40; background: #fff; border-radius: 16px; padding: 8px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 12px 30px rgba(0, 0, 0, .4); }
#menu button { text-align: left; padding: 10px 16px; font-size: 15px; border-radius: 10px; background: transparent; color: #333; font-weight: 700; }
#menu button:hover { background: #f0f6fb; }
#tracker { position: absolute; left: 820px; top: 80px; z-index: 19; display: grid; grid-template-columns: repeat(8, 40px); gap: 3px; padding: 8px 10px; background: rgba(8, 30, 40, .85); border: 1px solid rgba(255, 255, 255, .2); border-radius: 12px; }
#tracker .tk { text-align: center; padding: 2px 0; border-radius: 6px; background: rgba(255, 255, 255, .07); }
#tracker .tk b { display: block; font-family: var(--font-rank); font-size: 14px; color: #ffe08a; }
#tracker .tk span { font-size: 17px; font-weight: 900; font-family: var(--font-rank); }
#tracker .tk.zero { opacity: .35; }
#tracker .tk-title { grid-column: 1 / -1; font-size: 12px; color: #9fd8ff; text-align: center; letter-spacing: 2px; }

/* 座位：方形头像 80×80（白边 3px、圆角 4px）+ 深青名牌 #214949 */
.seat { position: absolute; z-index: 8; }
.seat[data-pos="2"] { left: 600px; top: 10px; display: flex; align-items: flex-start; gap: 4px; }
.seat[data-pos="3"] { left: 50px; top: 246px; display: flex; flex-direction: column; align-items: center; }
.seat[data-pos="1"] { left: 1150px; top: 246px; display: flex; flex-direction: column; align-items: center; }
.av-frame { position: relative; width: 80px; height: 80px; border-radius: 4px; background: var(--av-bg, linear-gradient(180deg, #ffe9a8, #ffc24a)); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); display: grid; place-items: center; font-size: 50px; line-height: 1; }
.av-frame .av-img { border-radius: 2px; }
.seat.turn .av-frame { animation: turnGlow 1.1s ease-in-out infinite; }
@keyframes turnGlow { 0%, 100% { box-shadow: 0 0 0 3px #ffd25c, 0 0 14px 4px rgba(255, 210, 92, .8); } 50% { box-shadow: 0 0 0 5px #ffd25c, 0 0 24px 8px rgba(255, 210, 92, .5); } }
.nameplate { margin-top: 2px; width: 92px; padding: 3px 4px 4px; background: rgba(33, 73, 73, .88); text-align: center; font-family: var(--font-round); }
.seat[data-pos="2"] .nameplate { width: auto; min-width: 92px; margin-top: 0; text-align: left; padding: 4px 10px; }
.np-name { font-size: 16px; white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; color: #ffffff; }
.np-sub { font-size: 17px; color: #f4e7a0; white-space: nowrap; }
.np-sub i { display: inline-block; width: 15px; height: 17px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fffbe0, #f5c94a 55%, #c48a12); vertical-align: -3px; margin-right: 4px; }
.tag { position: absolute; top: -9px; left: -9px; font-size: 11px; padding: 1px 6px; border-radius: 6px; font-weight: 800; color: #fff; background: #2b97ea; box-shadow: 0 2px 4px rgba(0, 0, 0, .3); white-space: nowrap; z-index: 2; }
.tag.off { background: #e2453a; } .tag.auto { background: #f2701f; }
.count-badge { position: absolute; right: -12px; bottom: -8px; min-width: 30px; height: 26px; padding: 0 6px; border-radius: 13px; background: linear-gradient(180deg, #ff6a5a, #d81f1f); border: 2px solid #fff; font-family: var(--font-rank); font-weight: bold; font-size: 16px; display: grid; place-items: center; z-index: 2; animation: pulse 1s infinite; }
@keyframes pulse { 50% { transform: scale(1.12); } }
.place-badge { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); font-size: 13px; padding: 2px 9px; border-radius: 10px; font-weight: 900; background: linear-gradient(180deg, #fff1a8, #f5b50a); color: #6b3a00; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); white-space: nowrap; z-index: 3; }
.bubble { position: absolute; z-index: 30; background: #fff; color: #333; padding: 7px 14px; border-radius: 16px; font-size: 16px; font-weight: 700; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); white-space: nowrap; animation: bubbleIn .25s ease-out; pointer-events: none; }

.pill { height: 40px; padding: 0 16px 0 8px; border-radius: 20px; font-size: 19px; font-weight: 700; color: #fff; background: linear-gradient(180deg, #b6c1cc 0%, #8e9aa8 50%, #7a8796 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 0 rgba(0, 0, 0, .35); letter-spacing: 4px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-round); }
.pill .ic { width: 28px; height: 28px; border-radius: 6px; background: #fff; color: #3a6fd8; font-size: 16px; display: grid; place-items: center; letter-spacing: 0; box-shadow: 0 1px 0 rgba(0, 0, 0, .2); }
.pill.blue { background: linear-gradient(180deg, #8fb2f0 0%, #6a92de 50%, #4f78cf 100%); }
.pill.on { background: linear-gradient(180deg, #ffb27a, #ee4f1c); }
.pill.round { width: 46px; height: 46px; padding: 0; font-size: 22px; border-radius: 50%; background: linear-gradient(180deg, #a8c6ff, #5f86d8); justify-content: center; letter-spacing: 0; }
/* 托管：参考图手牌右上方的圆形“A”按钮 */
#btn-tuoguan { position: absolute; left: 1212px; bottom: 96px; z-index: 13; width: 58px; height: 58px; border-radius: 50%; padding: 0; justify-content: center; font-size: 15px; letter-spacing: 0; background: radial-gradient(circle at 40% 35%, #f6d9a6, #c9894a 60%, #8a5326); border: 3px solid #3a2a1c; box-shadow: 0 3px 6px rgba(0, 0, 0, .4); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .4); line-height: 1.1; }
#btn-tuoguan.on { background: radial-gradient(circle at 40% 35%, #ffd0a0, #ff7a3a 60%, #c4400a); }
#quick-chat { position: absolute; right: 30px; bottom: 70px; z-index: 30; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px; background: #fff; border-radius: 16px; box-shadow: 0 10px 26px rgba(0, 0, 0, .4); }
#quick-chat button { font-size: 14px; padding: 7px 12px; border-radius: 14px; background: #eef4f9; color: #2a3a4a; font-weight: 700; white-space: nowrap; }
#quick-chat button:hover { background: #ffe9a8; }
#tuoguan-mask { position: absolute; left: 0; right: 0; bottom: 60px; height: 340px; z-index: 13; display: grid; place-items: center; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .45)); }
#tuoguan-mask > div { display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 20px; font-weight: 800; text-shadow: 0 2px 4px rgba(0, 0, 0, .6); }

/* 特效 */
#fx-layer { position: absolute; inset: 0; pointer-events: none; z-index: 45; overflow: hidden; }
.fx-text { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); font-size: 120px; font-weight: 900; letter-spacing: 14px; white-space: nowrap; font-family: var(--font-brush);
  background: linear-gradient(180deg, #fff9c0 0%, #ffd23a 45%, #ff6a1a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 3px #7a2000;
  filter: drop-shadow(0 6px 0 #5a1500) drop-shadow(0 0 30px rgba(255, 120, 30, .8)); animation: fxPop 1.4s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.fx-text.gold { background: linear-gradient(180deg, #ffffff 0%, #fff0a0 40%, #ffbf1a 100%); -webkit-background-clip: text; background-clip: text; }
@keyframes fxPop { 0% { transform: translate(-50%, -50%) scale(.2); opacity: 0; } 18% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 30% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { transform: translate(-50%, -62%) scale(1.05); opacity: 0; } }
.fx-flash { position: absolute; inset: 0; background: radial-gradient(circle, rgba(255, 230, 150, .6), transparent 65%); animation: flash .6s ease-out forwards; }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }
.shake { animation: shake .45s; }
@keyframes shake { 10%, 90% { transform: translate(-2px, 1px); } 20%, 80% { transform: translate(4px, -2px); } 30%, 50%, 70% { transform: translate(-7px, 3px); } 40%, 60% { transform: translate(7px, -3px); } }
.spark { position: absolute; width: 9px; height: 9px; border-radius: 50%; animation: spark 1.2s ease-out forwards; }
@keyframes spark { from { transform: translate(0, 0) scale(1); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }

/* 弹层（奶油色面板 + 彩带标题）*/
#overlay { position: absolute; inset: 0; z-index: 60; background: rgba(0, 0, 0, .5); display: grid; place-items: center; animation: fadeIn .25s; }
@keyframes fadeIn { from { opacity: 0; } }
#overlay-card { position: relative; min-width: 600px; max-width: 780px; background: linear-gradient(180deg, #fffdf6, #f4ecdb); color: #3d2a17; border: 4px solid #fff; border-radius: 24px; padding: 46px 30px 24px; box-shadow: 0 10px 0 rgba(0, 0, 0, .2), 0 24px 60px rgba(0, 0, 0, .5); animation: popIn .3s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes popIn { from { transform: scale(.85); opacity: 0; } }
.ov-ribbon { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); padding: 10px 46px; font-size: 28px; font-weight: 900; color: #fff; border-radius: 16px; letter-spacing: 6px; white-space: nowrap; text-shadow: 0 2px 0 rgba(0, 0, 0, .25); box-shadow: 0 5px 0 rgba(0, 0, 0, .2); background: linear-gradient(180deg, #ffad66, #f2701f); }
.ov-ribbon.win { background: linear-gradient(180deg, #ffe066, #f5a90a); color: #6b3a00; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.ov-ribbon.lose { background: linear-gradient(180deg, #9fb2c4, #5f7387); }
.ov-sub { text-align: center; color: #8a7458; margin-bottom: 12px; font-size: 15px; font-weight: 700; }
.ov-star { text-align: center; color: #f2701f; font-size: 17px; font-weight: 900; margin-bottom: 8px; }
.res-table { width: 100%; border-collapse: separate; border-spacing: 0 6px; margin: 4px 0 12px; }
.res-table th { font-size: 12px; color: #a08a6a; font-weight: 700; padding: 0 6px; text-align: center; }
.res-table td { padding: 8px 6px; text-align: center; font-size: 16px; background: #fff; font-weight: 700; }
.res-table td:first-child { border-radius: 12px 0 0 12px; } .res-table td:last-child { border-radius: 0 12px 12px 0; }
.res-table tr.me td { background: #fff3cf; }
.res-table td.nm { text-align: left; font-weight: 800; }
.res-table td.nm .av { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; overflow: hidden; font-size: 24px; vertical-align: middle; margin-right: 8px; background: #ffe9a8; }
.res-table td.big { font-family: var(--font-rank); font-size: 24px; font-weight: bold; }
.res-table .pos { color: #2fae45; } .res-table .neg { color: #e2453a; }
.place-pill { display: inline-block; min-width: 54px; padding: 3px 8px; border-radius: 10px; font-size: 14px; font-weight: 900; }
.place-pill.p0 { background: linear-gradient(180deg, #fff1a8, #f5b50a); color: #6b3a00; }
.place-pill.p1 { background: #dfe6ee; color: #3a4a5a; }
.place-pill.p2 { background: #f1d0b0; color: #7a4a20; }
.place-pill.p3 { background: #c9ced6; color: #4a4f57; }
.ov-btns { display: flex; gap: 14px; justify-content: center; margin-top: 6px; }
.ov-btns .gbtn { min-width: 160px; height: 52px; font-size: 19px; }
.ready-line { text-align: center; color: #8a7458; font-size: 13px; margin-top: 10px; }
.choose-list { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.rules-text { font-size: 14px; line-height: 1.9; color: #4a3a2a; max-height: 460px; overflow: auto; }
.rules-text b { color: #f2701f; }

#toast { position: absolute; left: 50%; top: 160px; transform: translateX(-50%); z-index: 80; background: rgba(20, 20, 20, .85); color: #fff; padding: 10px 24px; border-radius: 22px; font-size: 16px; font-weight: 700; opacity: 0; transition: opacity .2s; pointer-events: none; white-space: nowrap; }
#toast.show { opacity: 1; }
#my-hand .grp-mark.bomb { background: #ff5a3a; box-shadow: 0 0 6px rgba(255, 90, 58, .8); }

/* —— 炸弹特效 v3：双层星芒 + 烟雾团 + 拖尾流光 + 渐变大字 —— */
.bomb-icon { position: absolute; left: 640px; top: 300px; font-size: 64px; line-height: 1; transform: translate(-50%, -50%); animation: bombIn .3s ease-in forwards, bombOut .22s ease-out .28s forwards; filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .3)); }
@keyframes bombIn { from { transform: translate(-50%, -240%) scale(.4) rotate(-40deg); } to { transform: translate(-50%, -50%) scale(1) rotate(0); } }
@keyframes bombOut { to { transform: translate(-50%, -50%) scale(1.8); opacity: 0; } }
.burst { position: absolute; transform: translate(-50%, -50%) scale(0); opacity: 0; animation: burstIn 1.4s cubic-bezier(.15, 1.3, .3, 1) forwards; will-change: transform, opacity; }
.burst svg { width: 100%; height: 100%; display: block; overflow: visible; }
@keyframes burstIn { 0% { transform: translate(-50%, -50%) scale(0) rotate(-10deg); opacity: 1; } 22% { transform: translate(-50%, -50%) scale(1.08) rotate(0); opacity: 1; } 65% { opacity: .95; } 100% { transform: translate(-50%, -50%) scale(1.18) rotate(8deg); opacity: 0; } }
.shock { position: absolute; width: 90px; height: 90px; border-radius: 50%; border: 7px solid rgba(255, 255, 255, .95); transform: translate(-50%, -50%) scale(0); opacity: 0; animation: shock .9s ease-out forwards; will-change: transform, opacity; }
.shock.rainbow { border-color: #e2ccff; } .shock.super { border-color: #ffe27a; } .shock.gold { border-color: #fff0b0; }
@keyframes shock { 0% { transform: translate(-50%, -50%) scale(0); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(3.2); opacity: 0; } }
.puff { position: absolute; border-radius: 50%; transform: translate(-50%, -50%) scale(.3); opacity: 0; animation: puff 1.3s ease-out forwards; will-change: transform, opacity; }
@keyframes puff { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } 20% { opacity: .95; } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.25); opacity: 0; } }
.streak { position: absolute; width: 34px; height: 5px; border-radius: 3px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--c) 60%, #ffffff); transform-origin: 0 50%; transform: rotate(var(--rot)) translateX(0); opacity: 0; animation: streak .9s ease-out forwards; will-change: transform, opacity; }
@keyframes streak { 0% { transform: rotate(var(--rot)) translateX(10px) scaleX(.3); opacity: 1; } 60% { opacity: 1; } 100% { transform: rotate(var(--rot)) translateX(var(--dist)) scaleX(1); opacity: 0; } }
.fx-flash.bright { background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .85), rgba(255, 240, 180, .4) 22%, transparent 50%); animation: flash .5s ease-out forwards; }
.spark.star { width: 12px; height: 12px; border-radius: 0; background: transparent !important; }
.spark.star::before { content: "★"; position: absolute; left: -4px; top: -8px; font-size: 18px; color: inherit; }
.gold-rays { position: absolute; left: 640px; top: 300px; width: 520px; height: 520px; transform: translate(-50%, -50%); opacity: 0; animation: raysIn 2s ease-out forwards; will-change: transform, opacity; }
.gold-rays svg { width: 100%; height: 100%; display: block; }
@keyframes raysIn { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(30deg) scale(1.1); } }
.shake-big { animation: shakeBig .7s; }
@keyframes shakeBig { 10%, 90% { transform: translate(-3px, 1px); } 20%, 80% { transform: translate(6px, -3px); } 30%, 50%, 70% { transform: translate(-9px, 4px); } 40%, 60% { transform: translate(9px, -4px); } }
/* 大字：金黄渐变填充 + 深色粗描边 + 立体投影（与首页标题同一风格）*/
.fx-text[class*="big-"] { top: 300px; text-align: center; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; font-weight: 900; font-size: 64px; letter-spacing: 6px; color: transparent; -webkit-text-fill-color: transparent; -webkit-background-clip: text !important; background-clip: text !important; paint-order: stroke fill; text-shadow: none; animation: fxPop 1.4s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.fx-text.big-fire { background-image: linear-gradient(180deg, #fffbd0 0%, #ffe14a 40%, #ff9a1a 75%, #ff5a12 100%) !important; -webkit-text-stroke: 3px #7a2000; filter: drop-shadow(0 4px 0 #6a1800) drop-shadow(0 0 10px rgba(255, 255, 255, .9)) !important; }
.fx-text.big-super { font-size: 70px; background-image: linear-gradient(180deg, #ffffff 0%, #ffe066 35%, #ff6a1a 70%, #e0001b 100%) !important; -webkit-text-stroke: 3px #5a0010; filter: drop-shadow(0 4px 0 #4a000c) drop-shadow(0 0 10px rgba(255, 255, 255, .9)) !important; }
.fx-text.big-rainbow { background-image: linear-gradient(90deg, #ff4a4a, #ffb02a, #ffe94a, #4ad66a, #3ab8ff, #9a6bff) !important; -webkit-text-stroke: 3px #ffffff; filter: drop-shadow(0 4px 0 #5a2aa0) drop-shadow(0 0 8px rgba(255, 255, 255, .9)) !important; }
.fx-text.big-gold { font-size: 76px; background-image: linear-gradient(180deg, #fffbe6 0%, #ffe066 40%, #ffb000 75%, #e07a00 100%) !important; -webkit-text-stroke: 3px #6a3000; filter: drop-shadow(0 4px 0 #5a2600) drop-shadow(0 0 12px rgba(255, 255, 255, .95)) !important; }
.fx-text small { display: block; text-align: center; font-size: 26px; letter-spacing: 3px; margin-top: -2px; -webkit-text-stroke: 1.5px #5a0010; }

/* 底栏花色按钮：能凑同花顺才亮（金色光），否则灰 */
.suit-filter button:disabled { opacity: 1; cursor: default; transform: none; color: #6f747c; }
.suit-filter button.has { color: #f2f5f8; text-shadow: 0 0 10px #ffd25c, 0 1px 0 rgba(0, 0, 0, .4); }
.suit-filter button.has[data-s="1"], .suit-filter button.has[data-s="3"] { color: #ff6b6b; }

/* 一副结束：亮出剩余手牌 */
.zone.reveal { animation: fadeUp .35s ease-out; }
.zone .z-label.rem { background: rgba(200, 40, 40, .85); font-size: 13px; padding: 2px 10px; }
#reopen-result { position: absolute; left: 50%; top: 452px; transform: translateX(-50%); z-index: 50; min-width: 180px; height: 54px; font-size: 20px; letter-spacing: 4px; }

/* 出完后看对家的牌 */
#my-hand.peeking .card { pointer-events: none; }
.peek-label { position: absolute; left: 50%; transform: translateX(-50%); top: -6px; z-index: 400; display: flex; align-items: center; gap: 8px; padding: 4px 16px 4px 5px; border-radius: 20px; background: rgba(20, 60, 55, .85); color: #fff; font-size: 16px; font-weight: 800; white-space: nowrap; box-shadow: 0 3px 8px rgba(0, 0, 0, .3); }
.peek-label .pk-av { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; border: 2px solid #fff; display: grid; place-items: center; font-size: 20px; background: #ffe9a8; }

/* 本副进贡信息面板（左上，整副常驻）*/
#tribute-info { position: absolute; left: 44px; top: 82px; z-index: 18; min-width: 190px; padding: 6px 10px 8px; border-radius: 10px; background: rgba(15, 45, 50, .78); border: 1px solid rgba(255, 255, 255, .22); color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 4px 10px rgba(0, 0, 0, .25); }
#tribute-info .ti-title { font-size: 12px; color: #ffe08a; letter-spacing: 2px; margin-bottom: 3px; }
#tribute-info .ti-row { display: flex; align-items: center; gap: 5px; min-height: 52px; white-space: nowrap; }
#tribute-info .ti-row .card { margin: 0 6px 0 2px; }
#tribute-info .ti-who { min-width: 96px; }
#tribute-info .ti-row em { font-style: normal; color: #cfe3ea; font-weight: 500; margin-left: 4px; }
#tribute-info .ti-row.anti { white-space: normal; max-width: 230px; line-height: 1.5; color: #ffe9a8; }
#tribute-info .ti-k { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; font-size: 12px; color: #fff; }
#tribute-info .ti-k.gong { background: #e2602a; } #tribute-info .ti-k.huan { background: #2fae45; }

/* ================= 麻将专用 ================= */
body { --felt-a: #47998a; --felt-b: #42907f; --felt-c: #3b8073; --felt-d: #326c62; --wm-fill: rgba(40, 120, 104, .45); --wm-line: rgba(28, 86, 74, .45);
  --tile-back: linear-gradient(180deg, #4f8fe0 0%, #2f6cc4 60%, #2559a8 100%); --tile-edge: #f4ecd6; }
/* 大厅背景：暖色夜景渐变＋漂浮的大号麻将牌 */
/* 大厅背景：沿用家庭掼蛋的人物插画（不加任何颜色滤镜） */
#lobby { background: #2a2350; }
.lobby-bg { background: url("img/lobby_bg.jpg") center top / cover no-repeat; }
#lobby-tiles { position: absolute; left: 0; right: 0; top: 0; height: 380px; }
#lobby-tiles .lt { position: absolute; width: 96px; height: 130px; border-radius: 12px; background: linear-gradient(180deg, #fffdf6, #f1e8d2); box-shadow: 0 10px 0 #2f6cc4, 0 10px 0 2px #1f4f9a, 0 22px 30px rgba(0, 0, 0, .35); display: grid; place-items: center; }
#lobby-tiles .lt img { width: 86%; height: 86%; }
.mode-card[data-players="4"] { background: linear-gradient(180deg, #ffc05a, #ff8a1e); }
.mode-card[data-players="4"]::before { content: "🀄"; }
.mode-card[data-players="3"] { background: linear-gradient(180deg, #8fd6ff, #3b8fe8); }
.mode-card[data-players="3"]::before { content: "🎲"; }
.mini-seat.empty { background: repeating-linear-gradient(45deg, #f6efe0 0 6px, #efe4cc 6px 12px); border-style: solid; border-color: #e6d6b4; cursor: default; }
.rule-sum { font-size: 12.5px; color: #6b5233; line-height: 1.55; margin: 8px 0 6px; }
.rule-sum div { padding: 3px 0; border-top: 1px dashed #ecdcbc; }
.rule-sum b { display: inline-block; width: 22px; height: 20px; line-height: 20px; text-align: center; border-radius: 6px; margin-right: 6px; background: #f2701f; color: #fff; font-size: 12px; }

/* 牌：象牙白牌面＋蓝色牌背厚边 */
.tile { position: relative; flex: none; border-radius: calc(var(--w) * .12); width: var(--w); height: calc(var(--w) * 1.36);
  background: linear-gradient(180deg, #fffefa 0%, #fbf6e8 70%, #efe4c8 100%);
  box-shadow: 0 calc(var(--w) * .1) 0 #2f6cc4, 0 calc(var(--w) * .1) 0 1px #1d4a8e, 0 calc(var(--w) * .12 + 2px) 4px rgba(0, 0, 0, .35); }
.tile img { position: absolute; left: 6%; top: 5%; width: 88%; height: 90%; pointer-events: none; }
.tile.back { background: var(--tile-back); box-shadow: 0 calc(var(--w) * .1) 0 var(--tile-edge), 0 calc(var(--w) * .1) 0 1px #c9bb93, 0 calc(var(--w) * .12 + 2px) 4px rgba(0, 0, 0, .35); }
.tile.back::after { content: ""; position: absolute; inset: 14% 18%; border-radius: 4px; border: 1.5px solid rgba(255, 255, 255, .25); }
/* 横放的牌（左右两家）：宽高互换，牌面转 90° */
.tile.side { width: calc(var(--w) * 1.36); height: var(--w); }
.tile.side img { left: 50%; top: 50%; width: calc(var(--w) * .88); height: calc(var(--w) * 1.22); transform: translate(-50%, -50%) rotate(var(--rot, 90deg)); }
.tile.flip img { transform: rotate(180deg); }
.tile.dim { filter: brightness(.88); }
.tile .mark { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); width: 0; height: 0; border: 7px solid transparent; border-top-color: #ff3b30; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .4)); animation: bob .8s ease-in-out infinite alternate; }
@keyframes bob { to { transform: translate(-50%, -4px); } }
.tile.hl { outline: 3px solid #ffd25c; outline-offset: 1px; }

/* 牌墙：4 道 × 17 墩；尾牌、海底用颜色区分 */
#walls { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.wall { position: absolute; display: flex; }
.wall.h { width: 408px; height: 28px; }
.wall.v { width: 28px; height: 323px; flex-direction: column; }
.stk { position: relative; flex: none; }
.wall.h .stk { width: 24px; height: 28px; }
.wall.v .stk { width: 28px; height: 19px; }
.stk i { position: absolute; border-radius: 3px; background: var(--tile-back); box-shadow: 0 3px 0 var(--tile-edge), 0 3px 0 1px #b8aa82; }
.wall.h .stk i { left: 1px; right: 1px; height: 18px; }
.wall.v .stk i { top: 1px; bottom: 3px; width: 24px; }
.wall.h .stk i.lo { top: 8px; } .wall.h .stk i.hi { top: 2px; }
.wall.v .stk i.lo { left: 3px; } .wall.v .stk i.hi { left: 0; top: -3px; }
.stk.H i { background: linear-gradient(180deg, #ffb860, #e3812a); }
.stk.T i { background: linear-gradient(180deg, #9b8fc8, #6c5fa6); }
.stk.start::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 6px #ff3b30; }
.wall-legend { position: absolute; left: 444px; top: 512px; font-size: 13px; color: rgba(255, 255, 255, .85); display: flex; gap: 14px; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); z-index: 3; }
.wall-legend i { display: inline-block; width: 14px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; }

/* 中间信息盒：楼数、剩余、骰子；四边亮条指示轮到谁 */
#center-box { position: absolute; left: 574px; top: 258px; width: 132px; height: 108px; z-index: 5; border-radius: 14px; background: linear-gradient(180deg, #24343a, #17262b); border: 2px solid #5f7f86; box-shadow: 0 4px 12px rgba(0, 0, 0, .35), inset 0 0 12px rgba(0, 0, 0, .4); text-align: center; font-family: var(--font-round); }
#center-box .cb-floor { font-size: 30px; font-weight: 900; color: #ffd25c; line-height: 40px; margin-top: 6px; text-shadow: 0 2px 0 #7a4a00; }
#center-box .cb-floor small { font-size: 14px; color: #ffe9a8; margin-left: 2px; }
#center-box .cb-left { font-size: 14px; color: #d8eef0; }
#center-box .cb-left b { color: #fff; font-size: 18px; }
#center-box .cb-hd { font-size: 12px; color: #ffb860; }
#center-box .edge { position: absolute; border-radius: 3px; background: #ffd25c; box-shadow: 0 0 10px #ffd25c; opacity: 0; transition: opacity .2s; }
#center-box .edge.on { opacity: 1; animation: edgeGlow 1s ease-in-out infinite alternate; }
@keyframes edgeGlow { to { opacity: .45; } }
#center-box .e0 { left: 16px; right: 16px; bottom: -6px; height: 5px; } #center-box .e2 { left: 16px; right: 16px; top: -6px; height: 5px; }
#center-box .e1 { top: 16px; bottom: 16px; right: -6px; width: 5px; } #center-box .e3 { top: 16px; bottom: 16px; left: -6px; width: 5px; }
.dice { display: inline-flex; gap: 6px; margin-top: 2px; }
.die { width: 30px; height: 30px; border-radius: 7px; background: linear-gradient(180deg, #fff, #e8e2d2); box-shadow: 0 2px 0 #a89c7c; position: relative; }
.die i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #222; }
.die.red i { background: #d0021b; }
.die.roll { animation: dieRoll .5s linear 2; }
@keyframes dieRoll { 25% { transform: rotate(90deg) translateY(-6px); } 50% { transform: rotate(180deg); } 75% { transform: rotate(270deg) translateY(-6px); } 100% { transform: rotate(360deg); } }

/* 河（各家打出的牌） */
#rivers { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.river { position: absolute; display: flex; flex-wrap: wrap; gap: 0; }
.river .tile { margin: 0 0 4px 0; }
.river[data-pos="0"] { left: 574px; top: 372px; width: 156px; }
.river[data-pos="2"] { right: 574px; bottom: 548px; width: 156px; flex-wrap: wrap-reverse; flex-direction: row-reverse; }
.river[data-pos="1"] { left: 712px; bottom: 434px; height: 156px; flex-direction: column-reverse; flex-wrap: wrap; align-content: flex-start; }
.river[data-pos="3"] { right: 712px; top: 258px; height: 156px; flex-direction: column; flex-wrap: wrap; align-content: flex-end; flex-wrap: wrap-reverse; }
.river[data-pos="1"] .tile, .river[data-pos="3"] .tile { margin: 0 4px 0 0; }
.haidi-row { position: absolute; left: 50%; top: 82px; transform: translateX(-50%); display: flex; gap: 2px; }

/* 对手的手牌：背面＋明拎亮出的牌面＋碰杠 */
.opp-hand { position: absolute; z-index: 6; display: flex; align-items: center; gap: 2px; }
.opp-hand[data-pos="2"] { left: 300px; right: 300px; top: 26px; justify-content: center; flex-direction: row-reverse; }
.opp-hand[data-pos="1"] { left: 898px; top: 120px; bottom: 236px; flex-direction: column-reverse; justify-content: center; }
.opp-hand[data-pos="3"] { left: 336px; top: 120px; bottom: 236px; flex-direction: column; justify-content: center; }
.opp-hand .gap { width: 10px; height: 10px; flex: none; }
.meld { display: flex; gap: 1px; flex: none; position: relative; }
.opp-hand[data-pos="2"] .meld { flex-direction: row-reverse; }
.opp-hand[data-pos="1"] .meld { flex-direction: column-reverse; }
.opp-hand[data-pos="3"] .meld { flex-direction: column; }
.ming-tag { position: absolute; z-index: 7; padding: 2px 8px; border-radius: 8px; font-size: 13px; font-weight: 900; color: #fff; background: linear-gradient(180deg, #ff7a5a, #e0301e); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); white-space: nowrap; }

/* 座位：沿用掼蛋头像框；庄字、本场分 */
.seat[data-pos="2"] { left: 186px; top: 14px; display: flex; align-items: flex-start; gap: 4px; }
.seat[data-pos="3"] { left: 40px; top: 250px; display: flex; flex-direction: column; align-items: center; }
.seat[data-pos="1"] { left: 1150px; top: 250px; display: flex; flex-direction: column; align-items: center; }
.zhuang { position: absolute; right: -12px; top: -12px; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ff8a6a, #d0021b); border: 2px solid #ffe6a0; color: #fff; font-weight: 900; font-size: 16px; display: grid; place-items: center; z-index: 3; box-shadow: 0 2px 4px rgba(0, 0, 0, .4); font-family: var(--font-round); }
.np-sub.neg { color: #ffb0a6; }
#me-seat { position: absolute; left: 22px; top: 584px; bottom: auto; display: flex; flex-direction: column; align-items: center; gap: 0; z-index: 8; }
#me-seat .av-frame { border-color: #ffd25c; }
#me-seat .nameplate { width: 92px; background: rgba(33, 73, 73, .88); padding: 3px 4px 4px; margin: 2px 0 0; display: block; }
#me-seat .np-name { display: block; }
#me-seat .np-sub { display: block; height: auto; padding: 0; background: none; border-radius: 0; font-size: 17px; }

/* 我的手牌 */
#my-hand { position: absolute; left: 130px; right: 70px; top: 690px; height: 100px; display: flex; align-items: flex-end; justify-content: center; z-index: 10; }
#my-hand .meld { margin-right: 14px; align-items: flex-end; }
#my-hand .htile { cursor: pointer; transition: transform .1s; margin-right: 1px; }
#my-hand .htile:hover { transform: translateY(-6px); }
#my-hand .htile.sel { transform: translateY(-20px); }
#my-hand .htile.drawn { margin-left: 16px; }
#my-hand .htile.ok::before { content: "听"; position: absolute; left: 50%; top: -22px; transform: translateX(-50%); font-size: 12px; font-weight: 900; color: #fff; background: #2fae45; border-radius: 6px; padding: 0 5px; z-index: 2; }
#my-hand.ming-pick .htile:not(.ok) { filter: brightness(.6); cursor: not-allowed; }
#my-hand .htile.rev::after { content: "亮"; position: absolute; right: -4px; top: -8px; font-size: 11px; font-weight: 900; color: #fff; background: #e0301e; border-radius: 6px; padding: 0 4px; border: 1px solid #fff; }
#my-hand.locked .htile { cursor: default; }
#my-hand.locked .htile:hover { transform: none; }

/* 动作按钮：碰（黄）杠（蓝）胡（橙红）过（灰）明拎（绿） */
#actions { position: absolute; left: 0; right: 0; top: 600px; height: 70px; display: flex; justify-content: center; align-items: center; gap: 16px; z-index: 12; pointer-events: none; }
#actions .gbtn { pointer-events: auto; min-width: 118px; height: 60px; font-size: 26px; letter-spacing: 6px; border-radius: 16px; }
#actions .gbtn.red { --b-bg: linear-gradient(180deg, #ffb27a 0%, #ff5a3a 55%, #e0301e 100%); --b-shadow: #8a1c0d; }
#actions .claim-tile { pointer-events: none; margin-right: 6px; }
#actions .tip { pointer-events: none; color: #fff; font-size: 18px; font-weight: 800; text-shadow: 0 2px 4px rgba(0, 0, 0, .5); }
#tenpai-tip { position: absolute; left: 50%; top: 552px; transform: translateX(-50%); z-index: 12; background: rgba(10, 30, 36, .85); border: 1px solid rgba(255, 255, 255, .3); border-radius: 14px; padding: 6px 12px; display: flex; gap: 6px; align-items: center; font-size: 15px; font-weight: 800; white-space: nowrap; }
#center-msg { position: absolute; left: 50%; top: 452px; transform: translateX(-50%); z-index: 9; font-size: 16px; font-weight: 800; color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, .6); white-space: nowrap; pointer-events: none; }
#center-msg .big { display: block; text-align: center; font-size: 22px; color: #ffe066; }
.roll-btn { position: absolute; left: 50%; top: 392px; transform: translateX(-50%); z-index: 15; }
.haidi-pick { position: absolute; left: 50%; top: 380px; transform: translateX(-50%); z-index: 15; display: flex; gap: 14px; align-items: center; background: rgba(10, 30, 36, .85); padding: 10px 16px; border-radius: 16px; }

/* 右上：本场比分 */
#score-strip { position: absolute; right: 16px; top: 12px; z-index: 20; display: flex; gap: 6px; }
.watermark { top: 560px; display: none; }
#btn-tuoguan { left: 1210px; top: 600px; bottom: auto; }
#tuoguan-mask { bottom: 0; height: 220px; }

/* 动作特效：碰、杠、胡、明拎大字 */
.act-fx { position: absolute; z-index: 40; transform: translate(-50%, -50%); font-family: "PingFang SC", "Microsoft YaHei", sans-serif; font-weight: 900; font-size: 64px; letter-spacing: 4px; color: transparent; -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 3px #7a2000; paint-order: stroke fill; animation: fxPop 1.3s cubic-bezier(.2, 1.4, .4, 1) forwards; pointer-events: none; white-space: nowrap;
  background-image: linear-gradient(180deg, #fffbd0 0%, #ffe14a 40%, #ff9a1a 75%, #ff5a12 100%); filter: drop-shadow(0 4px 0 #6a1800); }
.act-fx.hu { font-size: 96px; background-image: linear-gradient(180deg, #ffffff 0%, #ffe066 35%, #ff6a1a 70%, #e0001b 100%); -webkit-text-stroke: 4px #5a0010; animation-duration: 1.8s; }
.act-fx.ming { background-image: linear-gradient(180deg, #e9ffe0, #7be36a 50%, #1f9a3a); -webkit-text-stroke: 3px #0b4a1a; filter: drop-shadow(0 4px 0 #0b3a14); }

/* 结算 */
#overlay-card { max-width: 1000px; min-width: 760px; padding: 44px 26px 20px; }
.res-head { text-align: center; margin-bottom: 8px; }
.res-head .pat { font-size: 26px; font-weight: 900; color: #e0301e; letter-spacing: 2px; }
.res-head .formula { font-size: 16px; color: #6b5233; margin-top: 4px; font-weight: 700; }
.res-head .formula b { color: #e0301e; font-size: 20px; }
.res-row { display: grid; grid-template-columns: 150px 1fr 110px; gap: 10px; align-items: center; background: #fff; border-radius: 14px; padding: 6px 10px; margin-bottom: 6px; }
.res-row.me { background: #fff3cf; }
.res-row.win { box-shadow: 0 0 0 3px #ffd25c; }
.res-row .who { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 16px; }
.res-row .who .av { width: 38px; height: 38px; border-radius: 10px; overflow: hidden; background: #ffe9a8; display: grid; place-items: center; font-size: 26px; flex: none; }
.res-row .who small { display: block; font-size: 12px; color: #a08a6a; font-weight: 700; }
.res-row .tiles { display: flex; align-items: flex-end; gap: 1px; flex-wrap: nowrap; overflow: hidden; }
.res-row .tiles .meld { margin-right: 8px; }
.res-row .dl { text-align: right; font-family: var(--font-rank); font-size: 28px; font-weight: bold; }
.res-row .dl.pos { color: #2fae45; } .res-row .dl.neg { color: #e2453a; }
.res-row .tot { font-size: 12px; color: #8a7458; font-family: var(--font-ui); font-weight: 700; }
.res-pays { font-size: 13px; color: #6b5233; line-height: 1.6; background: rgba(255, 255, 255, .6); border-radius: 10px; padding: 6px 12px; margin: 6px 0 10px; }
.hist-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.hist-table th, .hist-table td { padding: 5px 6px; border-bottom: 1px dashed #e6d6b4; text-align: center; }
.hist-table .pos { color: #2fae45; } .hist-table .neg { color: #e2453a; }
.rules-card { font-size: 14px; line-height: 1.75; max-height: 560px; overflow: auto; }
.rules-card h4 { color: #f2701f; margin-top: 6px; }
/* —— 第一轮截图后的调整 —— */
.seat[data-pos="2"] { left: 968px; top: 12px; }
#center-box { top: 252px; height: 120px; }
#center-box .cb-floor { font-size: 26px; line-height: 30px; margin-top: 4px; }
#center-box .cb-left { font-size: 13px; line-height: 18px; }
#center-box .cb-left b { font-size: 16px; }
#center-box .cb-left em { font-style: normal; color: #ffb860; margin-left: 6px; }
#center-box .dice { margin-top: 4px; }
#center-box .die { width: 24px; height: 24px; border-radius: 6px; }
#center-box .die i { width: 5px; height: 5px; }
.haidi-row { top: 124px; }