/* ============================================================
   炸金花 · 微乐风格 UI
   ============================================================ */
:root {
  --wood-1: #6b3f18;
  --wood-2: #3d2209;
  --gold-1: #ffeaa7;
  --gold-2: #e6bb56;
  --gold-3: #c1922d;
  --gold-line: #ffe9a8;
  --felt-1: #2e9b52;
  --felt-2: #15753a;
  --felt-3: #0a5427;
  --txt: #fff8e7;
  --txt-dim: #d8c9a8;
  --red: #ff5b5b;
  --green: #58e06a;
  --panel: rgba(52, 28, 8, 0.82);
  --panel-line: rgba(255, 223, 150, 0.28);
  --shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; height: 100%; overflow: hidden;
  font-family: var(--font);
  color: var(--txt);
  background:
    radial-gradient(circle at 50% -10%, #8a5a22 0%, #4a2a0c 42%, #221206 100%),
    #221206;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .35;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,220,150,.05) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.08) 0 2px, transparent 2px 7px);
}
.hidden { display: none !important; }
/* 三档高度兜底：dvh（跟随手机地址栏收放）→ --vh（JS 量的真实可视高度）→ 100% */
.screen { position: fixed; inset: 0; height: 100%; height: calc(var(--vh, 1vh) * 100); height: 100dvh; }

/* ============================ 按钮 ============================ */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 11px 18px; font-family: var(--font); font-size: 15px; font-weight: 800;
  color: #4a3106; border: none; border-radius: 14px; cursor: pointer;
  background: linear-gradient(180deg, #fdf3d0 0%, #e8ddb8 18%, var(--gold-2) 52%, var(--gold-3) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.85),
    inset 0 -4px 0 rgba(0,0,0,.16),
    0 4px 0 #8a6318,
    0 7px 14px rgba(0,0,0,.4);
  transition: transform .08s, filter .15s;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  user-select: none;
}
.btn:hover:not(:disabled) { filter: brightness(1.07); }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255,255,255,.7), 0 1px 0 #8a6318, 0 3px 7px rgba(0,0,0,.35); }
.btn:disabled { filter: grayscale(.7) brightness(.72); cursor: not-allowed; }

.btn.gold { background: linear-gradient(180deg, #fff6d2 0%, #f0d489 20%, #e2b447 55%, #bf8f26 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,.85), inset 0 -4px 0 rgba(0,0,0,.16), 0 4px 0 #8a6318, 0 7px 14px rgba(0,0,0,.4); }
.btn.green { color: #06340f; background: linear-gradient(180deg, #e2ffd9 0%, #a9ee94 20%, #4ec44f 55%, #2d9134 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,.8), inset 0 -4px 0 rgba(0,0,0,.2), 0 4px 0 #1c6b21, 0 7px 14px rgba(0,0,0,.4); }
.btn.blue { color: #04293f; background: linear-gradient(180deg, #e3f6ff 0%, #a8ddf7 20%, #4aa9e4 55%, #2b7cb6 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,.8), inset 0 -4px 0 rgba(0,0,0,.2), 0 4px 0 #1b567f, 0 7px 14px rgba(0,0,0,.4); }
.btn.red { color: #430b0b; background: linear-gradient(180deg, #ffe3e3 0%, #ffb0b0 20%, #ef5a5a 55%, #c53737 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,.75), inset 0 -4px 0 rgba(0,0,0,.22), 0 4px 0 #8b2222, 0 7px 14px rgba(0,0,0,.4); }
.btn.gray { color: #3a3327; background: linear-gradient(180deg, #fdfbf4 0%, #e2dbca 20%, #bcb19b 55%, #9c917b 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,.8), inset 0 -4px 0 rgba(0,0,0,.18), 0 4px 0 #6e6555, 0 7px 14px rgba(0,0,0,.35); }
.btn.ghost { background: rgba(0,0,0,.28); color: var(--txt); border: 1px solid var(--panel-line); box-shadow: none; text-shadow: none; font-weight: 600; }
.btn.ghost:hover:not(:disabled) { background: rgba(0,0,0,.45); }
.btn.ghost:active:not(:disabled) { transform: translateY(1px); }
.btn.big { width: 100%; padding: 16px; font-size: 18px; border-radius: 16px; letter-spacing: 2px; }
.btn.small { width: 100%; padding: 10px; font-size: 13px; font-weight: 600; margin-top: 12px; }
.btn.mini { padding: 5px 11px; font-size: 12px; border-radius: 9px; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 0 #8a6318, 0 3px 6px rgba(0,0,0,.3); }

.icon-btn {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 800; color: #fff6d8; cursor: pointer;
  background: linear-gradient(180deg, rgba(255,235,170,.32), rgba(120,70,20,.6));
  border: 2px solid rgba(255,225,150,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 3px 8px rgba(0,0,0,.4);
  transition: .15s;
}
.icon-btn:hover { filter: brightness(1.18); }
.icon-btn:active { transform: scale(.94); }
.icon-btn.back { font-size: 26px; line-height: 1; padding-bottom: 3px; }
.icon-btn.off { color: #a99b7d; border-color: rgba(255,225,150,.22); filter: grayscale(.8); }

input {
  width: 100%; padding: 13px 15px; font-size: 16px; font-family: var(--font);
  color: var(--txt); background: rgba(0,0,0,.42);
  border: 2px solid rgba(255,223,150,.25); border-radius: 13px; outline: none;
}
input::placeholder { color: #9b8a6b; }
input:focus { border-color: var(--gold-2); box-shadow: 0 0 0 3px rgba(230,187,86,.2); }

/* ============================ 大厅 ============================ */
#lobby { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px; overflow-y: auto; }
.lobby-deco {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 15% 12%, rgba(255,220,140,.16), transparent 40%),
    radial-gradient(circle at 85% 82%, rgba(90,220,120,.14), transparent 40%);
}
.lobby-card {
  position: relative; width: 100%; max-width: 430px; margin: auto;
  background: linear-gradient(180deg, rgba(96,56,20,.96), rgba(46,26,8,.97));
  border: 3px solid transparent; border-radius: 24px; padding: 26px 22px 22px;
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,225,150,.24);
}
.lobby-card::before {
  content: ""; position: absolute; inset: 6px; border-radius: 18px;
  border: 1px dashed rgba(255,225,150,.22); pointer-events: none;
}
.logo { text-align: center; margin-bottom: 22px; position: relative; }
.logo-suits { display: flex; justify-content: center; gap: 10px; font-size: 26px; margin-bottom: 2px; }
.logo-suits .s, .logo-suits .c { color: #f7e7bd; text-shadow: 0 2px 5px rgba(0,0,0,.6); }
.logo-suits .h, .logo-suits .d { color: #ff6b6b; text-shadow: 0 2px 5px rgba(0,0,0,.6); }
.logo h1 {
  margin: 0; font-size: 44px; letter-spacing: 10px; text-indent: 10px; font-weight: 900;
  background: linear-gradient(180deg, #fffbe8 8%, #ffe9a8 40%, #d9a92f 72%, #b8871c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 2px rgba(90,50,0,.55);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.5));
}
.logo-ribbon {
  display: inline-block; margin-top: 8px; padding: 5px 16px; font-size: 12px; letter-spacing: 1px;
  color: #ffeec2; border-radius: 999px;
  background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.28));
  border: 1px solid var(--panel-line);
}
.field { display: block; margin-bottom: 14px; }
.field span { display: block; font-size: 12px; color: var(--gold-2); margin-bottom: 6px; letter-spacing: 1px; }
.divider { text-align: center; margin: 18px 0; position: relative; }
.divider::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--panel-line); }
.divider span { position: relative; padding: 0 12px; font-size: 12px; color: var(--txt-dim); background: #522f11; border-radius: 999px; }
.join-row { display: flex; gap: 10px; }
.join-row input { flex: 1; letter-spacing: 4px; text-align: center; font-weight: 700; }
.join-row .btn { width: 96px; flex: none; }
.settings { margin-top: 16px; border-top: 1px solid var(--panel-line); padding-top: 14px; }
.settings summary { font-size: 13px; color: var(--txt-dim); cursor: pointer; outline: none; }
.settings summary:hover { color: var(--gold-2); }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 12px; }
.settings-grid label span { display: block; font-size: 11px; color: var(--txt-dim); margin-bottom: 4px; }
.settings-grid input { padding: 8px 10px; font-size: 13px; border-radius: 10px; border-width: 1px; }
.switch { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--txt-dim); margin-bottom: 6px; }
.switch input { width: auto; }
.lobby-links { text-align: center; padding: 10px 16px 6px; }
.lobby-foot { position: relative; text-align: center; font-size: 11px; color: #a8895f; padding: 0 16px 20px; }

/* ============================ 牌桌框架 ============================ */
#game { display: flex; flex-direction: column; }

.topbar {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: linear-gradient(180deg, rgba(70,40,12,.95), rgba(40,22,6,.95));
  border-bottom: 2px solid rgba(255,225,150,.28);
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
}
.room-pill {
  display: flex; align-items: center; gap: 7px; padding: 4px 12px 4px 14px;
  border-radius: 999px; background: rgba(0,0,0,.42); border: 1px solid var(--panel-line);
}
.room-pill .lbl { font-size: 11px; color: var(--txt-dim); }
/* 调试沙箱标记：只有后台把房间标成沙箱时才显示，玩家能一眼看出这是测试局 */
#sandboxTag {
  padding: 2px 8px; border-radius: 999px; font-size: 11px; line-height: 1.7; white-space: nowrap;
  color: var(--gold-1); background: rgba(255,204,102,.16); border: 1px solid rgba(255,204,102,.55);
}
.code { font-size: 19px; letter-spacing: 3px; color: var(--gold-1); font-variant-numeric: tabular-nums; text-shadow: 0 2px 5px rgba(0,0,0,.6); }
.pill {
  font-size: 12px; color: #ffeec2; padding: 5px 14px; border-radius: 999px;
  background: rgba(0,0,0,.42); border: 1px solid var(--panel-line);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.tb-right { margin-left: auto; display: flex; gap: 8px; flex: none; }

.layout { flex: 1; display: flex; min-height: 0; }
.table-area { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 10px; gap: 8px; }

/* ============================ 牌桌 ============================ */
.felt {
  position: relative; flex: 1; min-height: 0;
  border-radius: 50% / 40%;
  background:
    radial-gradient(ellipse at 50% 42%, var(--felt-1) 0%, var(--felt-2) 58%, var(--felt-3) 100%);
  border: 11px solid transparent;
  border-image: linear-gradient(180deg, #9a6224, #6b3f18 40%, #3d2209) 1;
  box-shadow:
    inset 0 0 80px rgba(0,0,0,.5),
    inset 0 0 0 3px rgba(255,225,150,.45),
    0 14px 36px rgba(0,0,0,.55);
}
.felt::after {
  content: ""; position: absolute; inset: 0; border-radius: 50% / 40%; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,225,150,.3), inset 0 0 60px rgba(0,60,20,.35);
}
.felt-inner {
  position: absolute; inset: 18px; border-radius: 50% / 40%;
  border: 2px dashed rgba(255,240,190,.16); pointer-events: none;
}

#seats { position: absolute; inset: 0; }

.seat {
  position: absolute; transform: translate(-50%, -50%);
  width: 142px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: transform .2s, opacity .2s;
}
.seat .cards { display: flex; gap: 3px; justify-content: center; }
.seat.folded { opacity: .38; filter: saturate(.4); }
.seat.offline .avatar { filter: grayscale(1) brightness(.7); }

.seat .avatar {
  position: relative; width: 50px; height: 50px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 900; color: #5b3c08;
  background: linear-gradient(180deg, #fff3cd, #e9c46a 55%, #b98d2c);
  border: 3px solid #7a5416;
  box-shadow: 0 0 0 2px rgba(255,235,170,.55), 0 4px 12px rgba(0,0,0,.5);
}
.seat.active .avatar {
  border-color: #fff3cd;
  box-shadow: 0 0 0 3px #ffd75e, 0 0 24px rgba(255,215,94,.9), 0 4px 12px rgba(0,0,0,.5);
  animation: pulse 1.1s ease-in-out infinite alternate;
}
@keyframes pulse { from { box-shadow: 0 0 0 3px #ffd75e, 0 0 14px rgba(255,215,94,.6); } to { box-shadow: 0 0 0 3px #ffd75e, 0 0 28px rgba(255,215,94,1); } }
.seat.active { transform: translate(-50%, -50%) scale(1.07); z-index: 3; }

.seat .timer {
  position: absolute; top: -8px; right: -8px;
  min-width: 26px; height: 26px; padding: 0 5px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900; color: #4a3106;
  background: linear-gradient(180deg, #fff6d2, #ffcf4d);
  border: 2px solid #8a6318;
  font-variant-numeric: tabular-nums;
  animation: tick 1s steps(1) infinite;
}
@keyframes tick { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

.seat .plate {
  display: flex; align-items: center; gap: 7px; max-width: 138px;
  padding: 3px 11px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(0,0,0,.78), rgba(0,0,0,.54));
  border: 1px solid var(--panel-line);
}
.seat .name {
  font-size: 12.5px; font-weight: 700; color: #fff4d8;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.seat .chips {
  flex: none; font-size: 12px; font-weight: 800; color: #ffe9a8;
  font-variant-numeric: tabular-nums;
}
.seat .chips .net { font-style: normal; font-size: 11px; margin-left: 4px; }
.seat .chips .net.up { color: var(--green); }
.seat .chips .net.down { color: #ff8a8a; }
.seat .chips .net.zero { color: var(--txt-dim); }
/* 座位上的「补」：表示本场累计输赢已经扣掉了补充筹码，不是刷出来的 */
.seat .chips .net .rb {
  font-style: normal; margin-left: 2px; padding: 0 3px; border-radius: 999px;
  font-size: 8px; font-weight: 800; color: #4a3106;
  background: linear-gradient(180deg, #fff3cd, #e2b447);
}
.seat .bet {
  max-width: 128px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; font-weight: 700; color: #fff6d8; padding: 1px 10px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(180,120,20,.85), rgba(110,70,10,.85));
  border: 1px solid rgba(255,225,150,.45);
}
.seat .badges { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.seat .tag {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: rgba(0,0,0,.5); color: var(--txt-dim); border: 1px solid var(--panel-line);
}
.seat .tag.look { color: #b8e7ff; border-color: rgba(120,200,255,.6); background: rgba(20,70,110,.7); }
.seat .tag.blind { color: #ffe6a8; border-color: rgba(255,215,94,.6); background: rgba(120,80,10,.7); }
.seat .tag.win { color: #4a3106; background: linear-gradient(180deg, #fff3cd, #e2b447); border-color: #8a6318; }
.seat .tag.ready { color: #d6ffd0; border-color: rgba(88,224,106,.6); background: rgba(20,80,30,.7); }
.seat .tag.off { color: #ffc4c4; border-color: rgba(255,91,91,.6); background: rgba(90,20,20,.7); }

/* ---- 扑克牌 ---- */
.card {
  position: relative; border-radius: 8px; flex: none;
  background: linear-gradient(160deg, #ffffff 0%, #f4f2ea 70%, #e6e2d4 100%);
  color: #1a1a1a; overflow: hidden;
  box-shadow: 0 3px 8px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.14);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-weight: 900; line-height: 1;
}
.card .label { font-size: 1em; }
.card .suit { font-size: .86em; margin-top: 1px; }
.card.red { color: #e0242c; }
.card.back {
  background:
    repeating-linear-gradient(45deg, #2f5fd0 0 6px, #1e3f96 6px 12px),
    #1e3f96;
  box-shadow: 0 3px 8px rgba(0,0,0,.55), inset 0 0 0 2px rgba(255,255,255,.5), inset 0 0 0 3px rgba(0,0,0,.15);
}
.card.back::after {
  content: "金"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: .78em; color: rgba(255,235,170,.9); text-shadow: 0 1px 3px rgba(0,0,0,.7);
}

/* 桌上小牌（对手） */
.seat .card { width: 40px; height: 57px; font-size: 19px; }
.seat .card.mini { width: 32px; height: 46px; font-size: 15px; }
.seat .card.mini .suit { font-size: .8em; }

/* ---- 我的牌 ---- */
.my-hand {
  flex: none; position: relative;
  height: 138px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.16));
  border: 1px solid rgba(255,225,150,.16);
}
.my-hand .hand-cards { display: flex; align-items: center; justify-content: center; }
.my-hand .card {
  width: 84px; height: 118px; font-size: 40px; border-radius: 11px;
  margin: 0 -5px; transition: transform .2s;
  box-shadow: 0 6px 16px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.14);
}
.my-hand .card:nth-child(1) { transform: rotate(-8deg) translateY(4px); }
.my-hand .card:nth-child(2) { transform: translateY(-6px); z-index: 2; }
.my-hand .card:nth-child(3) { transform: rotate(8deg) translateY(4px); }
.my-hand .card.back { box-shadow: 0 6px 16px rgba(0,0,0,.6), inset 0 0 0 3px rgba(255,255,255,.5), inset 0 0 0 4px rgba(0,0,0,.15); }
.my-hand .hand-tip {
  font-size: 12px; font-weight: 700; color: #ffe9a8; letter-spacing: .5px;
  padding: 3px 14px; border-radius: 999px; background: rgba(0,0,0,.5);
  border: 1px solid rgba(255,225,150,.3);
}
.my-hand .hand-tip.revealed { color: #d6ffd0; border-color: rgba(88,224,106,.5); }
.my-hand .hand-tip.win { color: #4a3106; background: linear-gradient(180deg, #fff3cd, #e2b447); border-color: #8a6318; }
.my-hand.folded { opacity: .45; }

.center-info {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  text-align: center; pointer-events: none; width: 240px;
}
.pot { display: flex; flex-direction: column; align-items: center; }
.pot-label { font-size: 11px; letter-spacing: 4px; color: rgba(255,240,200,.7); }
#potValue {
  font-size: 40px; font-weight: 900; color: #fff3cd; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgba(255,215,94,.85), 0 3px 6px rgba(0,0,0,.7);
  -webkit-text-stroke: 1.5px rgba(90,50,0,.5);
}
.meta-row { display: flex; gap: 8px; justify-content: center; font-size: 12px; color: rgba(255,240,200,.8); margin-top: 2px; }
.meta-row .dot { opacity: .5; }
.turn-hint { margin-top: 8px; font-size: 13px; font-weight: 700; color: #fff3cd; min-height: 19px; text-shadow: 0 2px 5px rgba(0,0,0,.8); }

.chat-line { flex: none; height: 20px; font-size: 12px; color: rgba(255,240,200,.75); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; }
.chat-line b { color: var(--gold-1); }

/* ============================ 操作栏 ============================ */
.actionbar {
  flex: none; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: center;
  min-height: 62px; padding: 8px 10px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(70,40,12,.75), rgba(34,18,6,.85));
  border: 1px solid rgba(255,225,150,.2);
}
.actionbar .waiting { font-size: 13px; color: var(--txt-dim); text-align: center; }
.actionbar .hint-title { font-size: 13px; font-weight: 700; color: var(--gold-1); margin-right: 4px; }
.actionbar .btn.act { min-width: 100px; padding: 14px 16px; font-size: 16px; border-radius: 15px; }
.actionbar .btn.act .cost { font-size: 11px; opacity: .85; font-weight: 700; }
.actionbar .btn.act.look { background: linear-gradient(180deg, #e6f6ff 0%, #a8ddf7 20%, #4aa9e4 55%, #2b7cb6 100%); color: #04293f; }
.actionbar .btn.act.call { background: linear-gradient(180deg, #e8ffe0 0%, #a9ee94 20%, #4ec44f 55%, #2d9134 100%); color: #06340f; }
.actionbar .btn.act.raise { background: linear-gradient(180deg, #fff6d2 0%, #f0d489 20%, #e2b447 55%, #bf8f26 100%); color: #4a3106; }
.actionbar .btn.act.compare { background: linear-gradient(180deg, #ffe3e3 0%, #ffb0b0 20%, #ef5a5a 55%, #c53737 100%); color: #430b0b; }
.actionbar .btn.act.fold { background: linear-gradient(180deg, #fdfbf4 0%, #e2dbca 20%, #bcb19b 55%, #9c917b 100%); color: #3a3327; }
.actionbar .btn.act { box-shadow: inset 0 2px 0 rgba(255,255,255,.8), inset 0 -4px 0 rgba(0,0,0,.2), 0 4px 0 rgba(0,0,0,.4), 0 8px 16px rgba(0,0,0,.4); }
.actionbar .btn.act:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255,255,255,.7), 0 1px 0 rgba(0,0,0,.4); }

/* ============================ 侧栏 ============================ */
.sidebar { width: 300px; flex: none; display: flex; flex-direction: column; gap: 9px; padding: 10px 10px 10px 0; min-height: 0; }
.panel {
  background: var(--panel); border: 1px solid var(--panel-line); border-radius: 16px;
  padding: 10px 12px; display: flex; flex-direction: column; min-height: 0;
  box-shadow: inset 0 1px 0 rgba(255,235,180,.12);
}
.panel.grow { flex: 1; }
.panel h3 {
  flex: none; margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: 3px;
  color: var(--gold-2); text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.scoreboard { display: flex; flex-direction: column; gap: 4px; overflow: auto; }
.sb-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center;
  font-size: 12px; padding: 5px 9px; border-radius: 10px; background: rgba(0,0,0,.3);
}
.sb-row.me { background: linear-gradient(180deg, rgba(255,215,94,.22), rgba(255,215,94,.1)); box-shadow: inset 0 0 0 1px rgba(255,215,94,.4); }
.sb-row .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sb-row .n .w { color: var(--gold-2); font-size: 10px; }
.sb-row .c { color: #ffe9a8; font-weight: 700; font-variant-numeric: tabular-nums; }
.sb-row .net { min-width: 54px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.sb-row .net.up { color: var(--green); }
.sb-row .net.down { color: #ff8a8a; }
.sb-row .net.zero { color: var(--txt-dim); }
/* 表头：明确「本场输赢」这一列的口径（已扣掉补充筹码） */
.sb-row.head {
  background: transparent; padding: 0 9px 3px; color: var(--txt-dim);
  font-size: 10.5px; font-weight: 700; letter-spacing: 1px;
}
/* 补充过筹码的玩家挂一个小标记，说明这个积分已经扣过补充了 */
.sb-row .rb {
  margin-left: 4px; padding: 0 5px; border-radius: 999px;
  font-size: 9.5px; font-weight: 800; color: #4a3106;
  background: linear-gradient(180deg, #fff3cd, #e2b447);
}

.log-list { flex: 1; overflow: auto; font-size: 12px; line-height: 1.75; color: var(--txt-dim); }
.log-list .l { padding: 1px 0; word-break: break-word; }
.log-list .l.hl { color: #ffe9a8; font-weight: 700; }

.chat-panel { flex: none; }
.chat-list { height: 100px; overflow: auto; font-size: 12px; line-height: 1.65; color: var(--txt-dim); }
.chat-list .m b { color: var(--gold-1); }
.chat-form { display: flex; gap: 6px; margin-top: 8px; }
.chat-form input { padding: 8px 10px; font-size: 12px; border-radius: 10px; border-width: 1px; }
.chat-form .btn { flex: none; }

/* 底部信息抽屉的标签条：只在窄屏出现（见下方响应式） */
.sb-tabs { display: none; }

/* ============================ 通用 ============================ */
.toast {
  position: fixed; left: 50%; top: 84px; transform: translate(-50%, -16px);
  padding: 12px 22px; border-radius: 14px; font-size: 14px; font-weight: 700;
  color: #ffd8d8; background: linear-gradient(180deg, rgba(120,20,20,.96), rgba(70,10,10,.96));
  border: 2px solid rgba(255,91,91,.7); box-shadow: 0 10px 26px rgba(0,0,0,.5);
  opacity: 0; pointer-events: none; transition: .22s; z-index: 99; max-width: 82vw; text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.good { color: #d8ffe2; background: linear-gradient(180deg, rgba(10,80,35,.96), rgba(6,45,20,.96)); border-color: rgba(88,224,106,.7); }

.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.72); padding: 18px; }
.modal-box {
  width: 100%; max-width: 580px; max-height: 84vh; overflow: auto; padding: 22px;
  border-radius: 22px; border: 3px solid rgba(255,225,150,.4);
  background: linear-gradient(180deg, rgba(96,56,20,.98), rgba(40,22,6,.99));
  box-shadow: var(--shadow);
}
.modal-box h3 { margin: 0 0 14px; font-size: 18px; letter-spacing: 3px; color: var(--gold-1); }
.rules { margin: 0 0 18px; padding-left: 20px; font-size: 13.5px; line-height: 2; color: #f0e4c8; }
.rules b { color: #ffe9a8; }

::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-thumb { background: rgba(255,215,120,.35); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,215,120,.55); }
::-webkit-scrollbar-track { background: transparent; }

/* ============================ 响应式 ============================
   设备探测在 index.html 头部内联脚本里完成，只往 <html> 上挂这几个 class：
     dev-mobile / dev-tablet / dev-pc —— UA 维度（手机、平板无论窗口多宽都走紧凑布局）
     touch                            —— 有触摸屏（按 44px 点按目标排版）
     compact / tight / short          —— 紧凑布局 / 极窄 / 矮屏
   桌面端就是默认样式，窗口拖窄了也会切到紧凑布局（和手机同一套规则）。
   ============================================================ */

/* PC 缩窗的第一档：只影响 941~1080px 的宽屏 */
@media (max-width: 1080px) {
  .sidebar { width: 260px; }
  .my-hand .card { width: 74px; height: 104px; font-size: 34px; }
}

/* ---------- 紧凑布局：手机 / 平板 / 窄窗口 ---------- */
html.compact .layout { flex-direction: column; }
html.compact .table-area { padding: 8px; gap: 6px; }
html.compact .topbar { padding: calc(7px + env(safe-area-inset-top)) 10px 7px; gap: 8px; }
html.compact .code { font-size: 17px; }

/* 侧栏 → 底部信息抽屉：默认只剩一条标签栏，点标签才占高度，牌桌拿到最大纵向空间 */
html.compact .sidebar {
  width: auto; flex: none; flex-direction: column; gap: 0;
  padding: 0 8px calc(7px + env(safe-area-inset-bottom));
  overflow: hidden;
}
html.compact .sidebar .panel { display: none; }
html.compact .sidebar.open .panel.active { display: flex; flex: none; height: 158px; padding: 9px 11px; }
html.compact .sidebar .panel h3 { display: none; }
html.compact .sidebar .chat-list { flex: 1; height: auto; min-height: 0; }
html.compact .sidebar .scoreboard { flex: 1; min-height: 0; }
html.compact .sb-tabs { display: flex; align-items: center; gap: 6px; padding: 7px 0; }
html.compact .sb-tab {
  flex: 1; padding: 10px 6px; cursor: pointer; border-radius: 11px;
  font-family: var(--font); font-size: 12.5px; font-weight: 800; color: var(--txt-dim);
  background: rgba(0, 0, 0, .34); border: 1px solid var(--panel-line);
}
html.compact .sb-tab.on {
  color: #4a3106; border-color: #8a6318; text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
  background: linear-gradient(180deg, #fff3cd, #e2b447);
}
html.compact .sb-tab:active { transform: translateY(1px); }

html.compact .felt { border-width: 8px; border-radius: 42% / 32%; }
html.compact .felt.shown { border-width: 8px; }
html.compact .felt::after, html.compact .felt-inner { border-radius: 42% / 32%; }
html.compact .seat { width: 112px; }
html.compact .seat .avatar { width: 44px; height: 44px; font-size: 16px; border-width: 2px; }
html.compact .seat .plate { max-width: 112px; padding: 2px 9px; gap: 5px; }
html.compact .seat .name { font-size: 11.5px; }
html.compact .seat .chips, html.compact .seat .bet { font-size: 11px; padding: 1px 8px; }
html.compact .seat .bet { max-width: 108px; }
html.compact .seat .card { width: 30px; height: 43px; font-size: 14px; border-radius: 6px; }
html.compact .seat .card.mini { width: 24px; height: 35px; font-size: 12px; }
html.compact #potValue { font-size: 30px; }
html.compact .center-info { width: 200px; }
html.compact .my-hand { height: 110px; border-radius: 15px; }
html.compact .my-hand .card { width: 68px; height: 96px; font-size: 30px; border-radius: 9px; }
html.compact .actionbar { min-height: 56px; padding: 6px 8px; gap: 8px; }
html.compact .actionbar .btn.act { min-width: 84px; padding: 12px 12px; font-size: 15px; }

html.compact .modal { padding: 12px; }
html.compact .modal-box { max-height: 88dvh; padding: 18px; border-radius: 18px; }
html.compact .rules { font-size: 14px; line-height: 1.95; }

/* iOS 上输入框字体 < 16px 时，聚焦会自动把整页放大，窄屏统一抬到 16px */
html.compact input,
html.compact .join-row input,
html.compact .settings-grid input,
html.compact .chat-form input,
html.compact .mp-search input { font-size: 16px; }

html.compact #lobby { padding: calc(14px + env(safe-area-inset-top)) 16px calc(14px + env(safe-area-inset-bottom)); }
html.compact .lobby-card { padding: 22px 16px 18px; }
html.compact .settings-grid { gap: 8px; }
html.compact .lobby-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }

/* 音乐面板：别贴着系统栏，太高时可以滚 */
html.compact .music-panel {
  bottom: calc(14px + env(safe-area-inset-bottom));
  max-height: 88vh; max-height: calc(var(--vh, 1vh) * 88); overflow-y: auto;
}

/* ---------- 紧凑座位：手机上一屏塞得下的「横向小气泡」 ----------
   原来那套「牌在上 / 头像 / 名牌 / 状态」竖排气泡单个约 150px 高，
   牌桌在手机上只有 500 出头，两行必然互相压住。紧凑模式改成横向气泡：
   牌从头像后露出 → 头像 + 名牌并排一行 → 状态标签换到第二行。
   锚点也由 render.js 换成 denseSpots()（最多 2 行，全部压在牌桌上半区）。 */
#seats.dense .seat {
  width: 84px; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 2px 3px;
}
#seats.dense .seat .cards { position: absolute; left: 50%; top: -13px; transform: translateX(-50%); gap: 2px; }
#seats.dense .seat .card { width: 22px; height: 32px; font-size: 11px; border-radius: 5px; }
#seats.dense .seat .card.mini { width: 18px; height: 26px; font-size: 9.5px; }
#seats.dense .seat .avatar { width: 30px; height: 30px; font-size: 13px; border-width: 2px; z-index: 2; }
#seats.dense .seat .plate {
  flex-direction: column; align-items: flex-start; gap: 0;
  max-width: 48px; padding: 1px 6px; border-radius: 9px;
}
#seats.dense .seat .name { font-size: 10px; }
#seats.dense .seat .chips { font-size: 9px; }
#seats.dense .seat .chips .net { font-size: 9px; margin-left: 3px; }
/* 第二行只放得下一条信息：状态（闷牌/已看牌/房主）比「已投 xx」更关键，下注额看底池和记分板 */
#seats.dense .seat .bet { display: none; }
#seats.dense .seat .badges { flex-wrap: nowrap; }
#seats.dense .seat .tag { font-size: 9px; padding: 1px 5px; }
#seats.dense .seat .timer { top: -7px; right: -7px; min-width: 20px; height: 20px; font-size: 10px; border-width: 1px; }

/* ---------- 手机（极窄 ≤560）：再压一档 ---------- */
html.tight .room-pill .lbl { display: none; }
html.tight #sandboxTag { font-size: 10px; padding: 1px 6px; }
html.tight .pill { display: none; }
html.tight .my-hand { height: 96px; }
html.tight .my-hand .card { width: 54px; height: 76px; font-size: 24px; border-radius: 8px; margin: 0 -6px; }
html.tight .actionbar { min-height: 52px; gap: 6px; }
html.tight .actionbar .btn.act { min-width: 0; padding: 11px 8px; font-size: 14px; flex: 1 1 auto; }
html.tight .turn-hint { font-size: 12px; }
html.tight .chat-line { font-size: 11.5px; }
html.tight .sidebar.open .panel.active { height: 146px; }
html.tight .sb-tab { padding: 9px 4px; font-size: 12px; }
html.tight .modal-box { max-height: 90dvh; }
html.tight .toast { max-width: 88vw; font-size: 13.5px; }
html.tight .logo h1 { font-size: 36px; }
/* 手机上音乐面板整宽贴底（也是安全区之上） */
html.tight .music-panel { left: 8px; right: 8px; width: auto; max-width: none; border-radius: 16px; }
html.tight .mp-list { max-height: 110px; }

/* ---------- 矮屏（横屏手机 / 扁平窗口 ≤620 高）----------
   纵向就这么点，先把「我的牌 / 操作栏 / 抽屉」全压扁，把高度让给牌桌，
   座位也由 render.js 换成单行排布（横屏够宽，一行塞得下）。 */
html.short .my-hand { height: 96px; }
html.short .my-hand .card { width: 56px; height: 78px; font-size: 24px; }
html.short .my-hand .hand-tip { display: none; }
html.short.compact .topbar { padding: calc(4px + env(safe-area-inset-top)) 8px 4px; }
html.short.compact .chat-line { display: none; }
html.short.compact .table-area { gap: 4px; padding: 6px; }
html.short.compact .my-hand { height: 76px; border-radius: 12px; }
html.short.compact .my-hand .card { width: 46px; height: 66px; font-size: 20px; border-radius: 7px; margin: 0 -4px; }
html.short.compact .actionbar { min-height: 46px; gap: 6px; padding: 4px 6px; }
html.short.compact .actionbar .btn.act { padding: 9px 8px; font-size: 13.5px; }
html.short.compact .sb-tabs { padding: 4px 0; }
html.short.compact .sb-tab { padding: 7px 4px; font-size: 11.5px; }
html.short.compact .sidebar.open .panel.active { height: 124px; }

/* ============================================================
   触屏细节
   ============================================================ */
/* 手指点按目标不小于 44px，并去掉双击缩放的判定等待。
   这里用媒体查询而不是 html.touch —— 即使设备探测脚本被 CSP 拦掉也照样生效。 */
@media (hover: none), (pointer: coarse) {
  .icon-btn { width: 44px; height: 44px; font-size: 18px; }
  .icon-btn.back { width: 40px; }
  .btn { min-height: 44px; }
  .btn.mini { min-height: 34px; padding: 7px 12px; font-size: 12.5px; }
  .mp-row { padding: 9px; }
  body { touch-action: manipulation; }
  .card, .seat, .my-hand, .actionbar { -webkit-user-select: none; user-select: none; }
}

/* 触屏没有真正的 hover：点过之后高亮会「粘」在按钮/列表行上，这里统一还原 */
@media (hover: none) {
  .btn:hover:not(:disabled) { filter: none; }
  .btn.ghost:hover:not(:disabled) { background: rgba(0, 0, 0, .28); }
  .icon-btn:hover { filter: none; }
  .mp-row:hover { background: rgba(0, 0, 0, .28); }
  .mp-row.on:hover { background: linear-gradient(180deg, rgba(255, 215, 94, .22), rgba(255, 215, 94, .1)); }
  .fair:hover { filter: none; }
  .settings summary:hover { color: var(--txt-dim); }
}

/* ============================================================
   大厅增强
   ============================================================ */
.logo-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 10px; }
.logo-chips .chip {
  font-size: 11px; padding: 4px 10px; border-radius: 999px; color: #ffeec2;
  background: rgba(0, 0, 0, .34); border: 1px solid var(--panel-line);
}

/* ============================================================
   牌桌细节
   ============================================================ */
.tb-right .icon-btn { font-size: 16px; }
.icon-btn.mini { width: 30px; height: 30px; font-size: 14px; }
.icon-btn.playing { color: #7dff9b; border-color: rgba(88, 224, 106, .7); }
.icon-btn.on { border-color: #ffd75e; box-shadow: 0 0 0 2px rgba(255, 215, 94, .55), 0 3px 8px rgba(0, 0, 0, .4); }

/* 发牌动画 */
.my-hand .hand-cards.deal .card { animation: dealIn .42s cubic-bezier(.2, .9, .3, 1.3) backwards; }
.my-hand .hand-cards.deal .card:nth-child(1) { animation-delay: .02s; }
.my-hand .hand-cards.deal .card:nth-child(2) { animation-delay: .12s; }
.my-hand .hand-cards.deal .card:nth-child(3) { animation-delay: .22s; }
@keyframes dealIn {
  from { opacity: 0; transform: translateY(-46px) rotate(-10deg) scale(.82); }
}

/* 当前行动玩家在记分板里高亮 */
.sb-row.turn { background: rgba(255, 215, 94, .12); box-shadow: inset 0 0 0 1px rgba(255, 215, 94, .55); }
.turn-hint.mine { color: #ffe066; }

/* ============================================================
   音乐播放器
   ============================================================ */
.music-panel {
  position: fixed; right: 14px; bottom: 14px; z-index: 60;
  width: 340px; max-width: calc(100vw - 24px);
  padding: 12px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(28, 16, 6, .97), rgba(16, 9, 3, .98));
  border: 2px solid rgba(255, 225, 150, .32);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 235, 180, .14);
  color: var(--txt);
  animation: mpUp .2s ease-out;
}
@keyframes mpUp { from { opacity: 0; transform: translateY(14px); } }
.mp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mp-badge {
  font-size: 11px; font-weight: 800; letter-spacing: 1px; padding: 3px 10px; border-radius: 999px;
  color: #ffeec2; background: rgba(0, 0, 0, .42); border: 1px solid var(--panel-line);
}
.mp-badge.online { color: #ffd9d9; border-color: rgba(255, 91, 91, .6); background: rgba(110, 20, 20, .6); }
.mp-now { display: flex; gap: 10px; align-items: center; }
.mp-cover {
  width: 64px; height: 64px; flex: none; border-radius: 12px; overflow: hidden; position: relative;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, rgba(255, 215, 94, .22), rgba(0, 0, 0, .5));
  border: 1px solid var(--panel-line);
}
.mp-cover img { width: 100%; height: 100%; object-fit: cover; }
.mp-cover-fb { font-size: 26px; color: #ffe9a8; }
.mp-info { flex: 1; min-width: 0; }
.mp-title { font-size: 14px; font-weight: 800; color: #fff3cd; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-artist { font-size: 11.5px; color: var(--txt-dim); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-lyric { font-size: 12px; color: #ffd75e; margin-top: 5px; min-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-progress { display: flex; align-items: center; gap: 8px; margin: 10px 0 8px; font-size: 11px; color: var(--txt-dim); font-variant-numeric: tabular-nums; }
.mp-bar { flex: 1; height: 6px; border-radius: 999px; background: rgba(0, 0, 0, .5); overflow: hidden; cursor: pointer; border: 1px solid rgba(255, 225, 150, .16); }
.mp-bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, #ffd75e, #e2b447); box-shadow: 0 0 10px rgba(255, 215, 94, .6); }
.mp-controls { display: flex; align-items: center; justify-content: center; gap: 10px; }
.mp-controls .icon-btn.play { width: 44px; height: 44px; font-size: 17px; }
.mp-search { display: flex; gap: 6px; margin-top: 10px; }
.mp-search input { padding: 9px 11px; font-size: 12.5px; border-radius: 10px; border-width: 1px; }
.mp-search .btn { flex: none; padding: 9px 12px; }
.mp-list { margin-top: 8px; max-height: 150px; overflow: auto; display: flex; flex-direction: column; gap: 3px; }
.mp-list-head { margin-top: 9px; font-size: 11px; color: var(--gold-2); opacity: .85; letter-spacing: .3px; }
.mp-row {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center;
  font-size: 12px; padding: 5px 8px; border-radius: 9px; cursor: pointer; background: rgba(0, 0, 0, .28);
}
.mp-row:hover { background: rgba(255, 215, 94, .14); }
.mp-row.on { background: linear-gradient(180deg, rgba(255, 215, 94, .22), rgba(255, 215, 94, .1)); box-shadow: inset 0 0 0 1px rgba(255, 215, 94, .4); }
.mp-row .i { color: var(--gold-2); font-weight: 700; text-align: center; }
.mp-row .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff3cd; }
.mp-row .a { color: var(--txt-dim); font-size: 11px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-empty { font-size: 12px; color: var(--txt-dim); text-align: center; padding: 10px 0; }
.mp-hint { margin-top: 8px; font-size: 11px; color: #a8895f; text-align: center; }

/* ============================================================
   发牌验证弹窗
   ============================================================ */
.fair-box { max-width: 640px; }
.fair-head { display: flex; align-items: center; justify-content: space-between; }
.fair-head h3 { margin: 0; }
.fair-body { margin: 14px 0 16px; font-size: 13px; color: #f0e4c8; }
.fair-loading, .fair-err { text-align: center; padding: 20px; color: var(--txt-dim); }
.fair-verdict { padding: 10px 14px; border-radius: 12px; font-weight: 800; text-align: center; margin-bottom: 12px; }
.fair-verdict.ok { color: #d6ffd0; background: rgba(20, 80, 30, .6); border: 1px solid rgba(88, 224, 106, .6); }
.fair-verdict.bad { color: #ffd8d8; background: rgba(90, 20, 20, .6); border: 1px solid rgba(255, 91, 91, .6); }
.fair-verdict.warn { color: #ffe9bd; background: rgba(96, 68, 12, .6); border: 1px solid rgba(255, 204, 102, .6); }
.fair-meta { display: grid; gap: 6px; margin-bottom: 12px; }
.fair-meta div { display: flex; gap: 10px; font-size: 12px; word-break: break-all; }
.fair-meta b { flex: none; width: 70px; color: var(--gold-2); font-weight: 700; }
.fair-body h4 { margin: 14px 0 6px; font-size: 13px; color: var(--gold-1); letter-spacing: 1px; }
.fair-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 10px; border-radius: 8px; background: rgba(0, 0, 0, .3); margin-bottom: 4px; }
.fair-row .c { color: #ffe9a8; font-weight: 700; font-variant-numeric: tabular-nums; }
.fair-deck { font-size: 12px; line-height: 1.9; color: #e8dcc0; background: rgba(0, 0, 0, .3); padding: 8px 10px; border-radius: 10px; word-break: break-all; }
.fair-note { margin: 12px 0 0; font-size: 11.5px; color: var(--txt-dim); line-height: 1.7; }

/* 顶部公平性徽标：点它就能打开发牌验证 */
.fair { cursor: pointer; font-weight: 800; letter-spacing: .5px; padding: 2px 8px; border-radius: 999px; border: 1px solid transparent; }
.fair:empty { display: none; }
.fair.locked { color: #ffe9a8; background: rgba(0, 0, 0, .35); border-color: rgba(255, 225, 150, .35); }
.fair.verified { color: #c9ffd2; background: rgba(20, 80, 30, .5); border-color: rgba(88, 224, 106, .55); }
.fair:hover { filter: brightness(1.15); }

/* ============================================================
   响应式
   ============================================================ */
/* 音乐面板在手机上的贴底样式见上方「响应式 → html.tight」 */

/* ============================================================
   语音：语音条 + 实时开麦
   ============================================================ */

/* ---- 聊天面板里的语音工具条 ---- */
.chat-tools { flex: none; display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.chat-tools .btn.mini { min-width: 0; white-space: nowrap; }
.chat-tools .clip-tip { font-size: 11px; color: var(--gold-1); font-variant-numeric: tabular-nums; }
#btnRtc.on {
  color: #06340f; text-shadow: none;
  background: linear-gradient(180deg, #e8ffe0 0%, #a9ee94 20%, #4ec44f 55%, #2d9134 100%);
}
#btnClip.recording {
  color: #430b0b;
  background: linear-gradient(180deg, #ffe3e3 0%, #ffb0b0 20%, #ef5a5a 55%, #c53737 100%);
  animation: clipPulse 1s ease-in-out infinite;
}
@keyframes clipPulse { 50% { filter: brightness(1.16); } }

/* ---- 语音条泡泡：点一下播放 ---- */
.chat-list .m.voice { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.voice-clip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; margin: 1px 0;
  border-radius: 999px; cursor: pointer; font-family: var(--font);
  font-size: 11.5px; font-weight: 700; color: #fff3cd;
  background: rgba(0, 0, 0, .38); border: 1px solid var(--panel-line);
}
.voice-clip:hover { background: rgba(255, 215, 94, .18); }
.voice-clip.playing {
  background: linear-gradient(180deg, rgba(255, 215, 94, .3), rgba(255, 215, 94, .14));
  box-shadow: inset 0 0 0 1px rgba(255, 215, 94, .5);
}
.voice-clip .vc-play { font-size: 9px; color: var(--gold-2); }
.voice-clip .vc-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.voice-clip .vc-bars i { display: block; width: 2px; height: 5px; border-radius: 2px; background: rgba(255, 233, 168, .8); }
.voice-clip .vc-bars i:nth-child(2) { height: 9px; }
.voice-clip .vc-bars i:nth-child(3) { height: 6px; }
.voice-clip .vc-bars i:nth-child(4) { height: 12px; }
.voice-clip .vc-bars i:nth-child(5) { height: 8px; }
.voice-clip .vc-bars i:nth-child(6) { height: 10px; }
.voice-clip .vc-bars i:nth-child(7) { height: 4px; }
.voice-clip.playing .vc-bars i { animation: vcWave .9s ease-in-out infinite; }
.voice-clip.playing .vc-bars i:nth-child(odd) { animation-delay: .15s; }
@keyframes vcWave { 50% { height: 3px; } }
.voice-clip .vc-dur { color: var(--txt-dim); font-variant-numeric: tabular-nums; }

/* ---- 座位：开麦光圈 / 正在说话高亮 ---- */
.seat.mic-on .avatar { box-shadow: 0 0 0 2px rgba(88, 224, 106, .7), 0 4px 12px rgba(0, 0, 0, .5); }
.seat.speaking .avatar {
  box-shadow: 0 0 0 3px #7dff9b, 0 0 16px rgba(125, 255, 155, .85);
  animation: speakRing .9s ease-in-out infinite;
}
@keyframes speakRing {
  50% { box-shadow: 0 0 0 5px rgba(125, 255, 155, .45), 0 0 22px rgba(125, 255, 155, .9); }
}
.seat .tag.mic { color: #d6ffd0; border-color: rgba(88, 224, 106, .6); background: rgba(20, 80, 30, .7); }

/* ---- 实时语音浮条 ---- */
.voice-bar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 65;
  display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 20px);
  padding: 7px 12px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(28, 16, 6, .97), rgba(16, 9, 3, .98));
  border: 2px solid rgba(88, 224, 106, .45);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 235, 180, .12);
  animation: mpUp .2s ease-out;
}
.voice-bar .vb-title { flex: none; font-size: 12px; font-weight: 800; color: #d6ffd0; white-space: nowrap; }
.voice-bar .vb-list { display: flex; align-items: center; gap: 5px; overflow: auto; max-width: 44vw; }
.voice-bar .vb-chip {
  flex: none; font-size: 11px; padding: 2px 9px; border-radius: 999px;
  color: var(--txt-dim); background: rgba(0, 0, 0, .4); border: 1px solid var(--panel-line);
}
.voice-bar .vb-chip.me { color: #ffe9a8; border-color: rgba(255, 215, 94, .5); }
.voice-bar .vb-chip.talking { color: #d6ffd0; border-color: rgba(88, 224, 106, .7); background: rgba(20, 80, 30, .6); }
.voice-bar .vb-chip.wait { color: #ffe9a8; border-color: rgba(255, 215, 94, .45); }
.voice-bar .vb-empty { font-size: 11px; color: var(--txt-dim); white-space: nowrap; }
.voice-bar .btn.mini { flex: none; }
.btn.red { background: linear-gradient(180deg, #ffe3e3 0%, #ffb0b0 20%, #ef5a5a 55%, #c53737 100%); color: #430b0b; }
#vbMute.on { background: rgba(0, 0, 0, .35); color: var(--txt-dim); box-shadow: none; text-shadow: none; }

/* ---- 录音浮层（按住说话时出现）---- */
.clip-hud {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 90;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 18px 26px; border-radius: 20px; text-align: center; pointer-events: none;
  background: linear-gradient(180deg, rgba(28, 16, 6, .97), rgba(16, 9, 3, .98));
  border: 2px solid rgba(255, 215, 94, .4); box-shadow: 0 18px 44px rgba(0, 0, 0, .7);
}
.clip-hud.cancel { border-color: rgba(255, 91, 91, .75); }
.clip-hud-wave { display: flex; align-items: flex-end; gap: 4px; height: 34px; }
.clip-hud-wave i {
  display: block; width: 5px; height: 8px; border-radius: 3px;
  background: linear-gradient(180deg, #ffd75e, #e2b447);
  animation: clipWave .8s ease-in-out infinite;
}
.clip-hud-wave i:nth-child(2) { animation-delay: .1s; }
.clip-hud-wave i:nth-child(3) { animation-delay: .2s; }
.clip-hud-wave i:nth-child(4) { animation-delay: .3s; }
.clip-hud-wave i:nth-child(5) { animation-delay: .4s; }
.clip-hud-wave i:nth-child(6) { animation-delay: .5s; }
.clip-hud-wave i:nth-child(7) { animation-delay: .6s; }
@keyframes clipWave { 0%, 100% { height: 8px; } 50% { height: 32px; } }
.clip-hud.cancel .clip-hud-wave i { background: linear-gradient(180deg, #ffb0b0, #c53737); animation-play-state: paused; height: 8px; }
.clip-hud-time { font-size: 22px; font-weight: 800; color: var(--gold-1); font-variant-numeric: tabular-nums; }
.clip-hud-tip { font-size: 11.5px; color: var(--txt-dim); }
.clip-hud.cancel .clip-hud-tip { color: #ffb0b0; }

/* WebRTC 远端声音的隐藏播放容器 */
.voice-sinks { position: absolute; width: 0; height: 0; overflow: hidden; }
.voice-sink { display: none; }

/* 紧凑布局：浮条挪到顶栏下方，别压住底部抽屉和输入框 */
html.compact .voice-bar { bottom: auto; top: calc(52px + env(safe-area-inset-top)); }
html.compact .voice-bar .vb-list { max-width: 36vw; }
html.compact .chat-tools { margin-bottom: 4px; }
html.compact .chat-tools .btn.mini { min-height: 30px; padding: 5px 10px; font-size: 12px; }
html.tight .voice-bar { max-width: calc(100vw - 12px); }
html.tight .chat-tools .btn.mini { padding: 5px 8px; }