/* ===== 掼蛋高级复盘 MVP · 牌桌呈现对齐「天天爱掼蛋」好友房回放 =====
   设计证据：ref_images/replay 实机截屏
   - 桌布：深紫蓝径向渐变（中心亮、边缘暗）
   - 牌张：全场统一尺寸（--cw 驱动），白底圆角，左上点数+花色、右下大花色
   - 级牌整组黄底；逢人配角标花色金色填充；大王红字 JOKER、小王深蓝字
   - 名牌：我方蓝、对方红；中央芯片=倒计时数码字+指向下一家的箭头
   - 控制条：半透明贴底，点牌桌空白呼出 */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --felt-hi: #7981a4;
  --felt-lo: #565e82;
  --gold: #e8c46a;
  --paper: #fdfcf8;
  --ink: #20232b;
  --red: #c8282e;
  --muted: #8a93a3;
  --accent: #2f7ef7;
  --us: #2b5ec0;
  --op: #b03346;
  --lv-bg1: #fdf6c8;
  --lv-bg2: #f7e896;
  --chip-bg1: #47447e;
  --chip-bg2: #34315f;
  --chip-fg: #cfc6ff;
}
html, body { height: 100%; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  background: radial-gradient(1200px 700px at 50% -10%, #22304a, #12151d 70%);
  color: #e8ebf1;
  overflow-x: hidden;
}
button { font: inherit; cursor: pointer; }
code { background: rgba(255,255,255,.1); padding: 1px 5px; border-radius: 4px; font-size: 12px; }

.btn {
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.07);
  color: #e8ebf1;
  padding: 7px 14px;
  border-radius: 8px;
  transition: .15s;
}
.btn:hover { background: rgba(255,255,255,.15); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.12); }
.btn.gold { background: var(--gold); border-color: var(--gold); color: #4a3410; font-weight: 600; }
.btn.danger { background: #a02c31; border-color: #a02c31; color: #fff; }
.btn:disabled { opacity: .38; cursor: not-allowed; }
.btn.small { padding: 4px 10px; font-size: 12px; border-radius: 6px; }
.hidden { display: none !important; }

/* ---------- 顶部栏 ---------- */
.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 22px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.25);
  position: sticky; top: 0; z-index: 20; backdrop-filter: blur(6px);
}
.topbar .logo { font-size: 19px; font-weight: 700; letter-spacing: 1px; }
.topbar .logo em { color: var(--gold); font-style: normal; }
.topbar .spacer, .game-topbar .spacer { flex: 1; }
.badge {
  font-size: 12px; padding: 3px 10px; border-radius: 99px;
  border: 1px solid rgba(255,255,255,.25); color: #cfd6e2;
}
.badge.drill { background: #7a3fd1; border-color: #7a3fd1; color: #fff; }

/* 牌局页顶栏：返回 / 本局打X / 我方 vs 对方 / 倍 */
.tb-back {
  border: none; background: rgba(255,255,255,.1); color: #fff;
  width: 36px; height: 36px; border-radius: 10px; font-size: 18px;
}
.tb-back:hover { background: rgba(255,255,255,.22); }
.lv-cap {
  background: #1e3264; color: #ffd94d; font-weight: 700;
  padding: 5px 14px; border-radius: 99px; font-size: 13px;
  border: 1px solid rgba(255,217,77,.35);
}
.team-cap { padding: 4px 16px; border-radius: 99px; font-size: 13px; font-weight: 700; color: #fff; }
.team-cap.us { background: var(--us); }
.team-cap.op { background: var(--op); }
.vs-mark { color: #ffd94d; font-weight: 900; font-size: 14px; font-style: italic; }
.mult { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: #ffd9a0; }
.mult b {
  background: radial-gradient(circle at 35% 30%, #ffb45e, #e8821e);
  color: #fff; border-radius: 50%; width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
}
.mult i { font-style: normal; color: #fff; }

/* ---------- 牌局库 ---------- */
.library { max-width: 920px; margin: 34px auto; padding: 0 20px 60px; }
.library h1 { font-size: 22px; margin-bottom: 6px; }
.library .sub { color: var(--muted); font-size: 13px; margin-bottom: 22px; line-height: 1.7; }
.lib-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.game-list { display: flex; flex-direction: column; gap: 10px; }
.game-item {
  display: flex; align-items: center; gap: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px; padding: 14px 18px;
}
.game-item:hover { border-color: rgba(255,255,255,.25); }
.game-item .info { flex: 1; min-width: 0; }
.game-item .name { font-weight: 600; margin-bottom: 3px; }
.game-item .meta { font-size: 12px; color: var(--muted); }
.game-item .meta .winning-player { color: #fff; }
.fav-star { color: var(--gold); }
.empty-tip { text-align: center; color: var(--muted); padding: 60px 0; font-size: 14px; line-height: 2; }

/* ---------- 牌桌 ---------- */
.game-wrap { display: flex; gap: 14px; padding: 12px 18px 22px; max-width: 1360px; margin: 0 auto; }
.table-zone { flex: 1; min-width: 0; }
.table {
  position: relative;
  height: min(68vh, 720px);
  min-height: 540px;
  border-radius: 26px;
  background: radial-gradient(ellipse at 50% 42%, var(--felt-hi), var(--felt-lo) 78%);
  box-shadow: inset 0 0 60px rgba(20,20,50,.5), 0 18px 40px rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
  --cw: 36px; /* JS 按桌宽覆写；牌高=1.42×牌宽 */
}

/* 座位容器 */
.seat { position: absolute; z-index: 2; }
.seat-bottom { bottom: 6px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.seat-top { top: 6px; left: 50%; transform: translateX(-50%); display: flex; align-items: flex-start; gap: 10px; }
.seat-left { left: 8px; top: 7%; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.seat-right { right: 8px; top: 7%; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

/* 名牌：我方蓝底、对方红底；轮到出牌时金圈 */
.nametag {
  padding: 4px 14px; border-radius: 99px;
  font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.nametag.us { background: linear-gradient(#3a7de0, var(--us)); }
.nametag.op { background: linear-gradient(#cf4455, var(--op)); }
.nametag.turn { outline: 2px solid var(--gold); box-shadow: 0 0 12px rgba(232,196,106,.7); }

/* 名次金印章 */
.rank-seal {
  position: absolute; z-index: 6;
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 17px; color: #6b4a08;
  background: radial-gradient(circle at 35% 30%, #ffe9a0, var(--gold) 55%, #c9a03f);
  border: 2px solid #a87b1e;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
  transform: rotate(-12deg);
}
.seat-bottom .rank-seal { top: -26px; right: -6px; }
.seat-top .rank-seal { bottom: -26px; right: -6px; }
.seat-left .rank-seal { top: -14px; right: -10px; }
.seat-right .rank-seal { top: -14px; left: -10px; }

/* ---------- 牌张（统一尺寸，--cw 驱动） ---------- */
.card {
  width: var(--cw); height: calc(var(--cw) * 1.42);
  background: var(--paper); color: var(--ink);
  border-radius: calc(var(--cw) * .1);
  border: 1px solid #c9c4b8;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  position: relative; flex: none;
  font-family: Georgia, 'Times New Roman', 'Songti SC', serif;
  font-weight: 700; user-select: none;
}
.card.red { color: var(--red); }
.card.level { background: linear-gradient(160deg, var(--lv-bg1), var(--lv-bg2)); }
.card .c-top {
  position: absolute; top: 5%; left: 7%;
  display: flex; align-items: baseline; gap: 1px; line-height: 1;
}
.card .c-rank { font-size: calc(var(--cw) * .40); }
.card .c-suit { font-size: calc(var(--cw) * .34); }
.card .c-suit.wild { color: #f6c945; text-shadow: 0 0 1px var(--red), 0 0 2px var(--red); }
.card .c-pip {
  position: absolute; right: 9%; bottom: 4%;
  font-size: calc(var(--cw) * .62); line-height: 1; opacity: .92;
}
.card.joker .c-jk {
  position: absolute; top: 7%; left: 0; right: 0; text-align: center;
  font-size: calc(var(--cw) * .18); font-weight: 800; letter-spacing: 1px;
  color: #2b3a67; font-family: -apple-system, "PingFang SC", sans-serif;
}
.card.joker.red .c-jk { color: var(--red); }
.card.joker .c-pip {
  right: 50%; transform: translateX(50%); bottom: 10%;
  font-size: calc(var(--cw) * .52);
}
.card.joker .c-pip.bw { filter: grayscale(1); }
.card.selectable { cursor: pointer; }
.card.selectable:hover { filter: brightness(1.07); }
.seat-bottom .card.selected { transform: translateY(calc(var(--cw) * -.3)); outline: 2px solid var(--gold); z-index: 5; }
.seat-top .card.selected { transform: translateY(calc(var(--cw) * .3)); outline: 2px solid var(--gold); z-index: 5; }
.seat-left .card.selected { transform: translateX(calc(var(--cw) * .3)); outline: 2px solid var(--gold); z-index: 5; }
.seat-right .card.selected { transform: translateX(calc(var(--cw) * -.3)); outline: 2px solid var(--gold); z-index: 5; }

/* ---------- 手牌：组合分组 ---------- */
.hand { display: flex; }
/* 底/顶家：竖列（列=组合），列内牌向下错开、下方的牌压上方，列底/列顶对齐 */
.seat-bottom .hand, .seat-top .hand { flex-direction: row; align-items: flex-end; gap: calc(var(--cw) * .14); }
.seat-top .hand { align-items: flex-start; }
.vcol { display: flex; flex-direction: column; }
.vcol .card + .card { margin-top: calc(var(--cw) * 1.42 * -.45); }
/* 左/右家：横行（行=组合），行自上而下排列、轻微叠放 */
.seat-left .hand, .seat-right .hand { flex-direction: column; }
.seat-left .hand { align-items: flex-start; }
.seat-right .hand { align-items: flex-end; }
.hrow { display: flex; gap: calc(var(--cw) * .06); }
.hrow + .hrow { margin-top: calc(var(--cw) * 1.42 * -.22); }

/* ---------- 桌面出牌区 ---------- */
.slot { position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: center; }
.slot-0 { bottom: 37%; left: 50%; transform: translateX(-50%); }
.slot-2 { top: 26%; left: 50%; transform: translateX(-50%); }
.slot-3 { left: 15%; top: 44%; transform: translateY(-50%); }
.slot-1 { right: 15%; top: 44%; transform: translateY(-50%); }
.played { display: flex; }
.played .card + .card { margin-left: calc(var(--cw) * -.38); }
.slot.latest .card { box-shadow: 0 0 0 2px var(--gold), 0 3px 8px rgba(0,0,0,.5); }

/* 「不出」气泡：白底金棕描边，小尾巴朝向该家 */
.pass-bubble {
  position: relative;
  background: var(--paper); color: #a87b1e;
  border: 2px solid #d4b48a;
  font-weight: 700; font-size: 15px; padding: 6px 18px;
  border-radius: 18px; box-shadow: 0 2px 6px rgba(0,0,0,.3);
  white-space: nowrap;
}
.pass-bubble::after { content: ''; position: absolute; border: 7px solid transparent; }
.pass-bubble.tail-0::after { top: 100%; left: 50%; margin-left: -7px; border-top-color: #d4b48a; }
.pass-bubble.tail-2::after { bottom: 100%; left: 50%; margin-left: -7px; border-bottom-color: #d4b48a; }
.pass-bubble.tail-3::after { left: 100%; top: 50%; margin-top: -7px; border-left-color: #d4b48a; }
.pass-bubble.tail-1::after { right: 100%; top: 50%; margin-top: -7px; border-right-color: #d4b48a; }

/* ---------- 中央芯片：倒计时 + 指向下一家的箭头 ---------- */
.chip { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); z-index: 4; }
.chip-num {
  min-width: 64px; text-align: center; padding: 8px 10px;
  background: linear-gradient(var(--chip-bg1), var(--chip-bg2));
  border-radius: 10px; border: 2px solid rgba(160,150,220,.35);
  color: var(--chip-fg);
  font-family: 'Courier New', ui-monospace, monospace;
  font-weight: 800; font-size: 30px; letter-spacing: 4px;
  text-shadow: 0 0 8px rgba(190,175,255,.8);
}
.chip-arrow {
  position: absolute; color: #cfe0ff;
  text-shadow: 0 0 8px rgba(160,190,255,.9);
  font-size: 22px; line-height: 1;
}
.chip-arrow.dir-0 { top: calc(100% + 5px); left: 50%; transform: translateX(-50%); }
.chip-arrow.dir-2 { bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%); }
.chip-arrow.dir-1 { left: calc(100% + 7px); top: 50%; transform: translateY(-50%); }
.chip-arrow.dir-3 { right: calc(100% + 7px); top: 50%; transform: translateY(-50%); }

/* ---------- 牌型飞溅动画 ---------- */
.splash {
  position: absolute; z-index: 9; pointer-events: none;
  font-size: 44px; font-weight: 900; letter-spacing: 4px; white-space: nowrap;
  background: linear-gradient(#fff3a0, #ffb02e 60%, #ff7a1a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)) drop-shadow(0 0 12px rgba(255,160,40,.6));
  animation: splashPop .95s ease-out forwards;
}
.sp-0 { bottom: 42%; left: 42%; }
.sp-2 { top: 32%; left: 42%; }
.sp-3 { left: 22%; top: 38%; }
.sp-1 { right: 22%; top: 38%; }
@keyframes splashPop {
  0% { opacity: 0; transform: scale(.4); }
  18% { opacity: 1; transform: scale(1.15); }
  30% { transform: scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.05); }
}

/* ---------- 控制条（点牌桌空白呼出） ---------- */
.ctrlbar {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  z-index: 8; display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 99px;
  background: rgba(18,18,38,.62); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.12);
  white-space: nowrap; max-width: calc(100% - 24px);
  overflow-x: auto; scrollbar-width: none;
}
.cb-ico {
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.14); color: #fff; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center;
}
.cb-ico:hover { background: rgba(255,255,255,.25); }
.cb-step { color: #fff; font-weight: 700; font-size: 14px; min-width: 52px; text-align: center; }
.cb-gap { flex: 0 0 4px; }
.cb-pill {
  border: none; border-radius: 99px; padding: 7px 15px;
  font-size: 13px; font-weight: 600; color: #fff;
  background: linear-gradient(#5b6fd6, #4755b8);
  box-shadow: 0 2px 5px rgba(0,0,0,.3);
}
.cb-pill:hover { filter: brightness(1.12); }
.cb-pill:disabled { opacity: .35; cursor: not-allowed; }
.cb-pill.gold, .cb-pill.faved { background: linear-gradient(#eec368, #d4a94a); color: #4a3410; }
.cb-pill.primary { background: linear-gradient(#3a7de0, var(--us)); }
.cb-pill.danger { background: linear-gradient(#c04550, #a03240); }
.cb-drill-tag { color: #d9c6ff; font-weight: 700; font-size: 13px; }
.cb-tip { color: #cfd6ee; font-size: 12px; }

/* ---------- 结算浮层 ---------- */
.settle {
  position: absolute; inset: 0; z-index: 10;
  background: rgba(12,12,28,.74); backdrop-filter: blur(3px);
  border-radius: 26px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
}
.settle-title {
  font-size: 34px; font-weight: 900; color: #f3d98b;
  letter-spacing: 6px; text-shadow: 0 2px 10px rgba(0,0,0,.6);
}
.settle-vs { display: flex; align-items: center; gap: 34px; }
.settle-side { display: flex; gap: 18px; }
.settle .vs-txt {
  font-size: 44px; font-weight: 900; color: #fff; font-style: italic;
  text-shadow: 0 0 16px rgba(255,255,255,.35);
}
.settle-card {
  width: 120px; padding: 18px 10px 14px; border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,.45);
}
.settle-side.op .settle-card { background: linear-gradient(165deg, #5568c9, #3c4a9e); }
.settle-side.us .settle-card { background: linear-gradient(165deg, #d15a8a, #a83a68); }
.st-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: #333;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700;
}
.st-name { color: #fff; font-size: 15px; font-weight: 600; }
.st-rank { color: #ffe9a0; font-size: 20px; font-weight: 900; letter-spacing: 2px; }
.settle-close {
  position: absolute; top: 14px; right: 18px;
  background: rgba(255,255,255,.14); color: #fff; border: none;
  width: 34px; height: 34px; border-radius: 50%; font-size: 15px;
}
.settle-close:hover { background: rgba(255,255,255,.28); }

/* ---------- 消息行 ---------- */
.msg-line { font-size: 13px; min-height: 20px; color: #ffd479; padding: 8px 4px 0; }
.msg-line.error { color: #ff8f8f; }

/* ---------- 牌局记录侧栏 ---------- */
.log-panel {
  width: 250px; flex: none;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px; padding: 12px;
  display: flex; flex-direction: column; max-height: calc(68vh + 30px);
}
.log-panel h4 {
  font-size: 13px; color: var(--muted); margin-bottom: 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.log-list { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.log-item { font-size: 12px; padding: 5px 8px; border-radius: 6px; color: #c4cbd8; cursor: pointer; line-height: 1.5; }
.log-item:hover { background: rgba(255,255,255,.08); }
.log-item.current { background: rgba(232,196,106,.18); color: var(--gold); }
.log-item.drill { color: #cbb7f5; }
.log-item .t { color: var(--muted); margin-right: 4px; }

/* ---------- 弹窗 ---------- */
.modal {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center;
}
.modal-card {
  width: min(620px, 92vw);
  background: #1c2130; border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px; padding: 22px;
}
.modal-title { font-size: 17px; font-weight: 700; margin-bottom: 10px; }
.modal-tip { font-size: 12px; color: var(--muted); line-height: 1.8; margin-bottom: 12px; }
#import-text {
  width: 100%; height: 220px; resize: vertical;
  background: #12151d; color: #dfe5ee; border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px; padding: 10px; font-family: ui-monospace, monospace; font-size: 12px;
}
.import-error { color: #ff8f8f; font-size: 12px; margin: 8px 0; white-space: pre-line; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }

@media (max-width: 980px) {
  .game-wrap { flex-direction: column; }
  .log-panel { width: 100%; max-height: 220px; }
}

.game-item[hidden]{display:none!important}.lib-actions select{max-width:100%;padding:10px;border-radius:8px;font-size:16px}
@media (max-width: 600px) {
  .game-item { flex-wrap: wrap; gap: 8px; }
  .game-item .info { flex: 1 0 100%; }
  .game-item .meta { line-height: 1.5; }
  .topbar .badge:last-child { display: none; }
  .lib-actions { gap: 8px; }
}