/* ============ UNO 联机 · 样式 ============ */
:root{
  --red:#ff4b3e; --yellow:#ffc531; --green:#1db954; --blue:#2f80ed;
  --gold:#ffc531;
  --bg0:#0a0d13; --bg1:#111722; --bg2:#161d2b;
  --panel:rgba(255,255,255,.045);
  --line:rgba(255,255,255,.09);
  --line2:rgba(255,255,255,.16);
  --txt:#e9eef6; --txt2:#93a0b4; --txt3:#5f6b7d;
  --danger:#ff5a4d; --ok:#31d67a;
  --card-w:88px; --card-h:132px;
  --r:14px;
}

*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:var(--bg0); color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:14px; line-height:1.5; overflow:hidden;
}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
input{font:inherit; color:inherit}
svg{display:block}
#app{height:100vh; height:100dvh; position:relative; overflow:hidden}

.screen{
  position:absolute; inset:0; display:none;
  background:
    radial-gradient(1200px 700px at 50% 18%, #1b2434 0%, #0d121b 55%, #070a0f 100%);
}
.screen.is-active{display:block}
#screen-table.is-active,.screen#screen-table{display:none}
#screen-table.is-active{display:grid}

/* ---------------- 通用按钮 ---------------- */
.btn{
  padding:10px 18px; border-radius:10px; font-weight:600; font-size:14px;
  background:var(--panel); border:1px solid var(--line); color:var(--txt);
  transition:.16s; white-space:nowrap;
}
.btn:hover{background:rgba(255,255,255,.10); border-color:var(--line2)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.38; cursor:not-allowed; transform:none}
.btn-primary{
  background:linear-gradient(180deg,#ffd45e,#f5a623); color:#20160a; border-color:transparent;
  box-shadow:0 6px 18px rgba(245,166,35,.28);
}
.btn-primary:hover{background:linear-gradient(180deg,#ffdc78,#ffb52e); border-color:transparent}
.btn-lg{padding:14px 22px; font-size:16px; border-radius:12px; width:100%}
.btn-ghost{background:transparent}
.btn-danger{background:var(--danger); border-color:transparent; color:#fff}
.btn-danger:hover{background:#ff6f63; border-color:transparent}

.icon-btn{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background:var(--panel); border:1px solid var(--line); color:var(--txt2); transition:.16s;
}
.icon-btn:hover{color:var(--txt); border-color:var(--line2); background:rgba(255,255,255,.10)}
.icon-btn svg{width:19px; height:19px}
#btnSound .ico-sound-off{display:none}
#btnSound.is-on .ico-sound-off{display:none}
#btnSound.is-on .ico-sound-on{display:block}
#btnSound.is-on{display:inline-flex}
#btnSound.muted{color:var(--txt3)}

/* 移动端计分板/战报抽屉：宽屏侧栏常驻，只在窄屏显示开关 */
.side-toggle{display:none}
.side-scrim{
  position:fixed; inset:0; z-index:39; background:rgba(5,7,11,.55);
  opacity:0; pointer-events:none; transition:opacity .24s;
}
.side-scrim.show{opacity:1; pointer-events:auto}

.link-btn{
  background:none; color:var(--txt2); font-size:13px; text-decoration:underline;
  text-underline-offset:3px; padding:4px;
}
.link-btn:hover{color:var(--txt)}

/* ---------------- 首页 ---------------- */
.home-wrap{height:100%; display:grid; place-items:center; padding:20px; overflow:auto}
.home-card{
  width:100%; max-width:380px; padding:32px 28px 26px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  border:1px solid var(--line); border-radius:22px; backdrop-filter:blur(14px);
  box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.logo-img{
  display:block; width:min(400px, 100%);
  margin:0 auto 8px; border-radius:18px;
  box-shadow:0 12px 32px rgba(28,39,58,.14);
}
.tagline{text-align:center; color:var(--txt2); font-size:13px; margin-bottom:26px}

.field{display:block; margin-bottom:16px}
.field-label{display:block; font-size:12px; color:var(--txt2); margin-bottom:6px}
.field input, .join-row input, .step-input{
  width:100%; padding:13px 14px; border-radius:11px; background:rgba(0,0,0,.32);
  border:1px solid var(--line); outline:none; transition:.16s;
  color:var(--txt); font-size:15px;
}
.field input:focus, .join-row input:focus, .step-input:focus{border-color:var(--gold); background:rgba(0,0,0,.45)}
.field input::placeholder, .join-row input::placeholder, .step-input::placeholder{color:var(--txt3)}

.divider{display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--txt3); font-size:12px}
.divider::before,.divider::after{content:''; flex:1; height:1px; background:var(--line)}
.join-row{display:flex; gap:8px}
.join-row input{flex:1; text-transform:uppercase; letter-spacing:4px; font-weight:700; text-align:center}
.home-card .link-btn{display:block; margin:20px auto 0}

/* ---- 首页：开始游戏板块 ---- */
.start-block{
  padding:16px; border-radius:16px; border:1px solid var(--line2);
  background:rgba(0,0,0,.26);
}
.start-head{
  font-size:13px; font-weight:700; color:var(--txt); margin-bottom:14px;
  letter-spacing:.5px;
}
.start-opt{display:flex; flex-direction:column; gap:8px}
.start-desc{font-size:11.5px; color:var(--txt3); line-height:1.5; margin:0}
.start-block .btn-lg{width:100%}
.start-split{
  display:flex; align-items:center; gap:10px; margin:14px 0;
  color:var(--txt3); font-size:11.5px;
}
.start-split::before,.start-split::after{content:''; flex:1; height:1px; background:var(--line)}

/* ---------------- 大厅 ---------------- */
#screen-lobby.is-active{display:grid; place-items:center; overflow:auto}
.lobby-card{
  width:100%; max-width:520px; margin:auto; padding:26px;
  max-height:calc(100dvh - 32px);
  display:flex; flex-direction:column; overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  border:1px solid var(--line); border-radius:20px; box-shadow:0 30px 70px rgba(0,0,0,.5);
}
/* 角色列表有 7 个角色很长，矮窗口会把「开始游戏」顶出屏幕外——
   头部/座位/操作栏固定不压缩，角色区自己滚动，开始按钮永远可见可点 */
.lobby-head,.lobby-seats,.seats-tip,.lobby-foot,.lobby-note{flex:0 0 auto}
.lobby-head{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:20px}
.lobby-head h2{font-size:13px; font-weight:500; color:var(--txt2)}
.room-code{
  font-size:38px; font-weight:800; letter-spacing:8px; color:var(--gold);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.lobby-seats{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:22px}
.lseat{
  padding:14px 10px; border-radius:13px; text-align:center;
  background:rgba(0,0,0,.26); border:1px dashed var(--line); min-height:86px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
}
.lseat.filled{border-style:solid; background:rgba(255,255,255,.06); border-color:var(--line2)}
.lseat .av{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  font-weight:700; font-size:16px; color:#0c0f15;
}
.lseat .nm{font-size:12px; font-weight:600; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lseat .tag{font-size:11px; color:var(--txt3)}
.lseat.empty .av{background:rgba(255,255,255,.08); color:var(--txt3); border:1px dashed var(--line2)}
.lseat.bot .tag{color:var(--gold)}
.lseat.me{border-color:var(--gold); box-shadow:0 0 0 1px rgba(255,197,49,.3) inset}
/* 可点的座位：空位（房主加人）/ 机器人（房主移除） */
.lseat.tappable{cursor:pointer; transition:.16s}
.lseat.tappable:hover{background:rgba(255,255,255,.1); border-color:var(--gold)}
.lseat.tappable:active{transform:scale(.97)}
.lseat.empty.tappable .av{background:rgba(255,197,49,.12); color:var(--gold); border-color:rgba(255,197,49,.4)}
.lseat .rm{position:absolute; top:4px; right:4px; opacity:.55; color:var(--txt3)}
.lseat.tappable:hover .rm{opacity:1; color:var(--red)}
.lseat{position:relative}

.seats-tip{margin:-12px 0 20px; font-size:11.5px; color:var(--txt3); text-align:center}

/* ---- 座位弹窗 ---- */
.seat-opts{display:flex; flex-direction:column; gap:10px; margin:4px 0 2px}
.seat-opt{
  display:flex; align-items:center; gap:12px; text-align:left; width:100%;
  padding:13px 14px; border-radius:13px; background:rgba(255,255,255,.05);
  border:1px solid var(--line); color:var(--txt); transition:.16s;
}
.seat-opt:hover{background:rgba(255,255,255,.1); border-color:var(--gold)}
.seat-opt-ico{
  flex:0 0 auto; width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  background:rgba(255,197,49,.12); color:var(--gold);
}
.seat-opt-ico svg{width:22px; height:22px}
.seat-opt-txt{display:flex; flex-direction:column; gap:3px; min-width:0}
.seat-opt-txt b{font-size:14px; font-weight:700}
.seat-opt-txt i{font-style:normal; font-size:11.5px; color:var(--txt3); line-height:1.4}
.seat-opt[data-act="wait"] .seat-opt-ico{background:rgba(120,200,255,.12); color:#8ec5ff}
.seat-opt[data-act="wait"]:hover{border-color:#8ec5ff}

.invite-code{
  text-align:center; font-size:44px; font-weight:800; letter-spacing:12px; color:var(--gold);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; padding:16px 0 18px;
}
.modal-sub{font-size:13px; color:var(--txt2); text-align:center; line-height:1.6; margin-bottom:4px}

/* 角色选择（大厅）：角色 = 身份，技能只是它自带的能力 */
.role-picker{
  margin:0 0 20px;
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding-right:4px;
}
.role-picker::-webkit-scrollbar{width:5px}
.role-picker::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14); border-radius:3px}
.role-picker-label{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  font-size:13px; font-weight:600; color:var(--txt); margin-bottom:4px;
}
.role-picker-label em{font-style:normal; font-size:11.5px; font-weight:400; color:var(--txt3)}
.role-picker-sub{font-size:11.5px; color:var(--txt3); margin:0 0 10px; line-height:1.5}
.role-list{display:flex; flex-direction:column; gap:8px}
.role-pick{
  display:flex; align-items:flex-start; gap:11px; width:100%;
  padding:11px 12px; border-radius:13px; background:rgba(0,0,0,.26);
  border:1px solid var(--line); color:var(--txt2); text-align:left;
  font:inherit; cursor:pointer; transition:.16s;
}
.role-pick:hover{background:rgba(255,255,255,.07); color:var(--txt)}
.role-pick.on{border-color:var(--gold); background:rgba(255,197,49,.10); color:var(--txt)}
.role-pick-ico{
  flex:0 0 auto; width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:rgba(255,255,255,.06); border:1px solid var(--line); color:var(--txt2);
}
.role-pick-ico svg{width:24px; height:24px}
.role-pick-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
.role-pick-top{display:flex; align-items:center; gap:7px}
.role-pick-top b{font-size:14px; font-weight:700; color:var(--txt)}
.role-tag{
  font-style:normal; font-size:10px; font-weight:600; padding:1px 6px; border-radius:5px;
  background:rgba(255,255,255,.08); color:var(--txt3);
}
.role-pick-desc{font-size:11.5px; color:var(--txt2); line-height:1.45}
.role-pick-skill{font-size:11px; color:var(--txt3); line-height:1.45}
.role-pick-skill em{font-style:normal; font-weight:700; color:var(--gold); margin-right:5px}
.role-pick.on .role-pick-desc{color:var(--txt)}
.role-pick.on .role-pick-skill{color:var(--txt2)}
.role-pick-check{
  flex:0 0 auto; width:19px; height:19px; margin-top:9px; color:var(--gold);
  opacity:0; transition:.16s;
}
.role-pick-check svg{width:19px; height:19px; display:block}
.role-pick.on .role-pick-check{opacity:1}
.role-hint{font-size:12px; color:var(--txt3); margin-top:8px; min-height:16px}
.role-hint b{color:var(--gold)}

/* 角色徽记配色 */
.role-pick-ico[data-role="shield"]{background:rgba(120,200,255,.13); color:#8ec5ff; border-color:rgba(120,200,255,.3)}
.role-pick-ico[data-role="thief"]{background:rgba(220,160,80,.13); color:#f0c080; border-color:rgba(220,160,80,.3)}
.role-pick-ico[data-role="seer"]{background:rgba(180,140,255,.13); color:#c8b0ff; border-color:rgba(180,140,255,.3)}
.role-pick-ico[data-role="lucky"]{background:rgba(80,220,140,.13); color:#7ee8a8; border-color:rgba(80,220,140,.3)}
.role-pick-ico[data-role="pin"]{background:rgba(255,180,80,.15); color:#ffc070; border-color:rgba(255,180,80,.34)}
.role-pick-ico[data-role="thorn"]{background:rgba(255,120,140,.13); color:#ffa0b0; border-color:rgba(255,120,140,.3)}
.role-pick.on .role-pick-ico{background:rgba(255,197,49,.16); color:var(--gold); border-color:rgba(255,197,49,.45)}

.role-ico{
  display:grid; place-items:center; width:28px; height:28px; border-radius:8px;
  background:rgba(255,255,255,.06); color:var(--txt3);
}
.role-ico svg{width:19px; height:19px}

.opt-group{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px}
.opt-label{font-size:13px; color:var(--txt2)}
.seg{display:flex; gap:6px; background:rgba(0,0,0,.28); padding:4px; border-radius:11px; border:1px solid var(--line)}
.seg button{
  padding:7px 13px; border-radius:8px; font-size:13px; font-weight:600; color:var(--txt2); transition:.16s;
}
.seg button:hover{color:var(--txt); background:rgba(255,255,255,.07)}
.seg button.on{background:var(--gold); color:#20160a}

.lobby-foot{display:flex; align-items:center; gap:12px}
.lobby-hint{flex:1; text-align:center; font-size:12px; color:var(--txt3)}
.lobby-foot .btn-primary{width:auto; flex:0 0 auto; padding:13px 26px}
.lobby-note{margin-top:12px; font-size:12px; color:var(--txt3); text-align:center; min-height:16px}

/* ---------------- 顶栏 ---------------- */
#screen-table{
  grid-template-columns:1fr 324px; grid-template-rows:auto 1fr auto;
}
.topbar{
  grid-column:1/3; display:flex; align-items:center; gap:10px; padding:10px 14px;
  background:rgba(0,0,0,.30); border-bottom:1px solid var(--line); backdrop-filter:blur(10px);
}
.brand{font-size:19px; font-weight:900; font-style:italic; letter-spacing:-.5px; color:var(--red)}
.pill{
  padding:5px 11px; border-radius:20px; background:var(--panel); border:1px solid var(--line);
  font-size:12px; color:var(--txt2);
}
.pill b{color:var(--txt); font-family:ui-monospace,Menlo,monospace; letter-spacing:1px}
.spacer{flex:1}

/* ---------------- 牌桌 ---------------- */
.table{position:relative; overflow:hidden; min-height:0}
.seat{position:absolute; display:flex; flex-direction:column; align-items:center; gap:6px; width:132px}
.seat[data-slot="top"]{top:18px; left:50%; transform:translateX(-50%)}
.seat[data-slot="left"]{left:16px; top:50%; transform:translateY(-50%)}
.seat[data-slot="right"]{right:16px; top:50%; transform:translateY(-50%)}

.pcard{
  width:100%; padding:9px 8px; border-radius:13px; text-align:center;
  background:rgba(255,255,255,.05); border:1px solid var(--line); transition:.2s;
  display:flex; flex-direction:column; align-items:center; gap:5px;
}
.pcard.turn{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), 0 0 26px rgba(255,197,49,.24)}
.pcard.off{opacity:.45}
.pcard .av{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  font-weight:800; font-size:17px; color:#0c0f15; position:relative;
}
.pcard .nm{font-size:12.5px; font-weight:600; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pcard .meta{font-size:11px; color:var(--txt3)}
.pcard .bot-tag{font-size:10px; color:var(--gold); border:1px solid rgba(255,197,49,.35); border-radius:5px; padding:0 4px}
.seat-role{
  display:inline-block; font-size:10px; font-weight:700;
  padding:1px 5px; border-radius:5px; margin-left:4px;
  background:rgba(120,180,255,.15); color:#9bccff; border:1px solid rgba(120,180,255,.3);
}
.seat-role[data-role="shield"]{background:rgba(120,200,255,.15); color:#8ec5ff; border-color:rgba(120,200,255,.35)}
.seat-role[data-role="thief"]{background:rgba(220,160,80,.15); color:#f0c080; border-color:rgba(220,160,80,.35)}
.seat-role[data-role="seer"]{background:rgba(180,140,255,.15); color:#c8b0ff; border-color:rgba(180,140,255,.35)}
.seat-role[data-role="lucky"]{background:rgba(80,220,140,.15); color:#7ee8a8; border-color:rgba(80,220,140,.35)}
.seat-role[data-role="pin"]{background:rgba(255,180,80,.18); color:#ffc070; border-color:rgba(255,180,80,.4)}
.seat-role[data-role="thorn"]{background:rgba(255,120,140,.15); color:#ffa0b0; border-color:rgba(255,120,140,.35)}
.seat-role::after{content:""}

.mini-hand{display:flex; justify-content:center; height:26px; margin-top:-2px}
.mini-card{
  width:17px; height:25px; border-radius:3px; margin-left:-9px;
  background:linear-gradient(150deg,#2a3346,#141a26); border:1px solid rgba(255,255,255,.18);
  box-shadow:0 2px 5px rgba(0,0,0,.4);
}
.mini-card:first-child{margin-left:0}

.uno-flag{
  position:absolute; top:-9px; right:-8px; background:var(--red); color:#fff;
  font-size:10px; font-weight:900; font-style:italic; padding:2px 6px; border-radius:6px;
  transform:rotate(12deg); box-shadow:0 3px 10px rgba(255,75,62,.5); letter-spacing:.5px;
}
.uno-flag.gold{background:var(--gold); color:#20160a; box-shadow:0 3px 10px rgba(255,197,49,.5)}

/* 中央区 */
.stage{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:26px;
}
.pile{position:relative; width:var(--card-w); height:var(--card-h); border-radius:10px}
.pile-draw{cursor:pointer; transition:.18s}
.pile-draw:hover{transform:translateY(-4px)}
.pile-draw:active{transform:translateY(-1px)}
.pile-back{
  position:absolute; inset:0; border-radius:10px;
  background:url('/assets/card-back.jpg') center/cover no-repeat, linear-gradient(150deg,#ffd45e,#f5a623);
  border:1px solid rgba(28,39,58,.14); box-shadow:0 8px 22px rgba(28,39,58,.28);
}
.pile-count{
  position:absolute; right:-7px; bottom:-7px; min-width:26px; height:26px; padding:0 6px;
  border-radius:13px; background:var(--bg2); border:1px solid var(--line2);
  display:grid; place-items:center; font-size:12px; font-weight:700; color:var(--txt2);
}
.pile-discard{display:grid; place-items:center}
.pile-discard .ucard{position:absolute}
.pile-discard .ucard:nth-child(1){transform:rotate(-7deg) translate(-6px,4px)}
.pile-discard .ucard:nth-child(2){transform:rotate(5deg) translate(7px,-3px)}
.pile-discard .ucard:nth-child(3){transform:rotate(2deg)}
.pile-discard .ucard:nth-child(3).pop{animation:popCard .34s cubic-bezier(.2,1.4,.4,1)}
@keyframes popCard{
  0%{transform:translate(0,120px) rotate(-14deg) scale(.8); opacity:0}
  60%{transform:translate(0,-8px) rotate(3deg) scale(1.04); opacity:1}
  100%{transform:rotate(2deg) scale(1)}
}

.dir-indicator{position:relative; width:120px; height:120px; display:grid; place-items:center}
.dir-svg{width:120px; height:120px}
.dir-arc{transition:stroke-dashoffset .5s ease}
.dir-arrow{
  position:absolute; width:34px; height:34px; color:var(--gold);
  transition:transform .5s cubic-bezier(.3,1.3,.4,1);
}
.dir-arrow svg{width:34px; height:34px}
.dir-arrow.ccw{transform:scaleX(-1)}
.dir-label{
  position:absolute; bottom:-2px; font-size:11px; color:var(--txt3); letter-spacing:1px;
}

.turn-banner{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  padding:7px 16px; border-radius:20px; font-size:13px; font-weight:600;
  background:rgba(0,0,0,.45); border:1px solid var(--line); color:var(--txt2);
  pointer-events:none; max-width:90%; text-align:center;
}
.turn-banner.mine{color:var(--gold); border-color:rgba(255,197,49,.4); background:rgba(255,197,49,.10)}
.color-badge{
  position:absolute; left:50%; top:14px; transform:translateX(-50%);
  display:flex; align-items:center; gap:7px; padding:5px 12px; border-radius:18px;
  background:rgba(0,0,0,.45); border:1px solid var(--line); font-size:12px; color:var(--txt2);
}
.color-badge i{width:14px; height:14px; border-radius:50%; display:block; box-shadow:0 0 10px currentColor}

/* ---------------- 卡牌 ---------------- */
.ucard{
  position:relative; width:var(--card-w); height:var(--card-h); border-radius:10px;
  background:#fff; overflow:hidden; flex:0 0 auto;
  box-shadow:0 6px 16px rgba(0,0,0,.45); user-select:none;
  --cc:#888;
}
.ucard::before{
  content:''; position:absolute; left:-24%; top:11%; width:148%; height:78%;
  border-radius:50%; background:var(--cc); transform:rotate(-22deg);
}
.ucard .uoval{
  position:absolute; left:12%; top:15%; width:76%; height:70%; border-radius:50%;
  background:#fff; transform:rotate(-22deg);
}
.ucard .ucorner{
  position:absolute; z-index:2; color:#fff; font-weight:900; font-size:16px; line-height:1;
  text-shadow:0 1px 0 rgba(0,0,0,.3);
}
.ucard .ucorner.tl{left:7px; top:6px}
.ucard .ucorner.br{right:7px; bottom:6px; transform:rotate(180deg)}
.ucard .umid{
  position:absolute; inset:0; z-index:3; display:grid; place-items:center; color:var(--cc);
}
.ucard .umid .big{
  font-size:40px; font-weight:900; color:#fff; line-height:1;
  -webkit-text-stroke:2.5px rgba(0,0,0,.55); paint-order:stroke fill;
  text-shadow:0 2px 6px rgba(0,0,0,.35);
}
.ucard .umid svg{width:38px; height:38px; color:currentColor}

.ucard.wild::before{background:#15161a}
.ucard.wild .uwild{
  position:absolute; left:8%; top:14%; width:84%; height:72%; border-radius:50%;
  transform:rotate(-22deg); overflow:hidden; z-index:1;
}
.ucard.wild .uwild i{position:absolute; width:50%; height:50%}
.ucard.wild .uwild i.q1{left:0; top:0; background:var(--red); border-radius:100% 0 0 0}
.ucard.wild .uwild i.q2{right:0; top:0; background:var(--yellow); border-radius:0 100% 0 0}
.ucard.wild .uwild i.q3{left:0; bottom:0; background:var(--blue); border-radius:0 0 0 100%}
.ucard.wild .uwild i.q4{right:0; bottom:0; background:var(--green); border-radius:0 0 100% 0}
.ucard.wild .umid{color:#fff; z-index:3}
.ucard.wild .umid .big{-webkit-text-stroke:3px rgba(0,0,0,.75)}

.ucard.small{--card-w:56px; --card-h:84px; width:56px; height:84px}
.ucard.small .umid .big{font-size:27px; -webkit-text-stroke:2px rgba(0,0,0,.55)}
.ucard.small .umid svg{width:26px; height:26px}
.ucard.small .ucorner{font-size:11px}

/* ---------------- 手牌 ---------------- */
.handbar{grid-column:1/3; padding:6px 14px 12px; position:relative}
.hand-actions{
  display:flex; justify-content:center; gap:10px; min-height:0; margin-bottom:4px;
}
.hand-actions:empty{display:none}
.hand-actions .btn{box-shadow:0 6px 18px rgba(0,0,0,.4)}

.my-hand{
  position:relative; height:calc(var(--card-h) + 26px); display:flex; justify-content:center;
}
.my-hand .ucard{
  position:absolute; bottom:0; left:50%; transform-origin:50% 130%;
  transition:transform .18s cubic-bezier(.2,1,.3,1), box-shadow .18s;
  cursor:default;
}
.my-hand .ucard.playable{cursor:pointer}
.my-hand .ucard.playable:hover{
  transform:var(--tf) translateY(-26px) scale(1.06) !important; z-index:60;
  box-shadow:0 18px 34px rgba(0,0,0,.6);
}
.my-hand .ucard.dim{filter:brightness(.42) saturate(.5)}
.my-hand .ucard.drawn{
  outline:2px solid var(--gold); outline-offset:2px; z-index:55;
  animation:drawPulse .9s ease-in-out infinite alternate;
}
@keyframes drawPulse{from{box-shadow:0 6px 16px rgba(0,0,0,.45)}to{box-shadow:0 0 24px rgba(255,197,49,.7)}}
.my-hand .ucard.enter{animation:enterCard .3s cubic-bezier(.2,1.3,.4,1)}
@keyframes enterCard{
  from{transform:var(--tf) translate(-160px,90px) rotate(-30deg) scale(.7); opacity:0}
}

.ucard.fly{
  position:fixed; z-index:900; pointer-events:none;
  transition:transform .34s cubic-bezier(.3,.8,.3,1), opacity .34s;
}

/* ---------------- 侧栏 ---------------- */
.side{
  grid-column:2; grid-row:2/4; border-left:1px solid var(--line);
  background:rgba(0,0,0,.22); display:flex; flex-direction:column; min-height:0;
}
.side-block{padding:14px; border-bottom:1px solid var(--line); min-height:0}
.side-block.grow{flex:1; display:flex; flex-direction:column; border-bottom:none}
.side-block h3{font-size:11px; font-weight:600; color:var(--txt3); letter-spacing:1.5px; margin-bottom:10px}
.score-list{display:flex; flex-direction:column; gap:6px}
.score-row{
  display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:9px;
  background:rgba(255,255,255,.04); border:1px solid transparent; font-size:13px;
}
.score-row.me{border-color:rgba(255,197,49,.35); background:rgba(255,197,49,.07)}
.score-row.turn{border-color:var(--line2)}
.score-row .dot{width:9px; height:9px; border-radius:50%; flex:0 0 auto}
.score-row .nm{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.score-row .cnt{font-size:11px; color:var(--txt3); font-variant-numeric:tabular-nums}
.score-row .sc{font-weight:700; font-variant-numeric:tabular-nums; min-width:34px; text-align:right}
.score-row .lead{color:var(--gold)}

.log-list{flex:1; overflow:auto; display:flex; flex-direction:column; gap:5px; font-size:12.5px}
.log-list::-webkit-scrollbar{width:5px}
.log-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14); border-radius:3px}
.log-item{padding:5px 8px; border-radius:7px; background:rgba(255,255,255,.03); color:var(--txt2)}
.log-item.hi{background:rgba(255,197,49,.10); color:var(--gold)}

/* ---------------- 弹层 ---------------- */
.overlay[hidden]{display:none}
.overlay{
  position:fixed; inset:0; z-index:800; display:grid; place-items:center; padding:20px;
  background:rgba(5,7,11,.72); backdrop-filter:blur(6px); animation:fadeIn .18s;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{
  width:100%; max-width:420px; max-height:86vh; overflow:auto; padding:24px;
  background:linear-gradient(180deg,#1a2130,#131923); border:1px solid var(--line2);
  border-radius:20px; box-shadow:0 30px 80px rgba(0,0,0,.65); animation:rise .22s cubic-bezier(.2,1.2,.3,1);
}
@keyframes rise{from{transform:translateY(18px) scale(.97); opacity:0}}
.modal h2{font-size:19px; margin-bottom:6px}
.modal p{color:var(--txt2); font-size:13.5px; margin-bottom:16px}
.modal .modal-actions{display:flex; gap:10px; margin-top:18px}
.modal .modal-actions .btn{flex:1; padding:12px}
.btn.btn-skill{background:linear-gradient(180deg, rgba(180,140,255,.32), rgba(140,90,220,.32)); border:1px solid rgba(180,140,255,.45); color:#e8d8ff}
.btn.btn-skill:hover{background:linear-gradient(180deg, rgba(180,140,255,.45), rgba(140,90,220,.45))}
/* 被动技能就绪提示（盾卫/反噬/幸运儿：充能满后自动触发，不需要点击） */
.skill-ready-note{
  display:inline-flex; align-items:center; padding:9px 14px; border-radius:10px;
  font-size:13px; font-weight:600; letter-spacing:.5px;
  background:rgba(120,200,255,.12); border:1px dashed rgba(120,200,255,.4); color:#9fd0ff;
}
.freeze-grid{display:grid; grid-template-columns:1fr; gap:8px; margin-top:6px}
.freeze-opt{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:rgba(0,0,0,.28); border:1px solid var(--line); border-radius:10px;
  color:var(--txt); font:inherit; cursor:pointer; transition:.16s;
}
.freeze-opt:hover{background:rgba(255,255,255,.06); border-color:var(--line2)}
.freeze-opt .dot{width:10px; height:10px; border-radius:50%; flex:0 0 auto}
.freeze-opt .nm{flex:1; text-align:left; font-weight:600}
.freeze-opt .role-chip{font-size:10px; padding:1px 5px; border-radius:5px; background:rgba(255,255,255,.06); color:var(--txt3)}
.role-chip{font-size:10px; padding:1px 5px; border-radius:5px; display:inline-flex; align-items:center; gap:3px; background:rgba(255,255,255,.06); color:var(--txt3)}
.role-chip svg{width:14px; height:14px}
.role-chip[data-role="shield"]{background:rgba(120,200,255,.15); color:#8ec5ff}
.role-chip[data-role="thief"]{background:rgba(220,160,80,.15); color:#f0c080}
.role-chip[data-role="seer"]{background:rgba(180,140,255,.15); color:#c8b0ff}
.role-chip[data-role="lucky"]{background:rgba(80,220,140,.15); color:#7ee8a8}
.role-chip[data-role="pin"]{background:rgba(255,180,80,.18); color:#ffc070}
.role-chip[data-role="thorn"]{background:rgba(255,120,140,.15); color:#ffa0b0}

.color-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.color-opt{
  height:64px; border-radius:13px; border:2px solid transparent; font-weight:800; font-size:15px;
  color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.4); transition:.16s;
}
.color-opt:hover{transform:translateY(-2px); border-color:rgba(255,255,255,.6)}
.color-opt[data-c="red"]{background:var(--red)}
.color-opt[data-c="yellow"]{background:var(--yellow); color:#20160a; text-shadow:none}
.color-opt[data-c="green"]{background:var(--green)}
.color-opt[data-c="blue"]{background:var(--blue)}

.result-winner{text-align:center; margin-bottom:18px}
.result-winner .big{font-size:26px; font-weight:800; margin:8px 0 2px}
.result-winner .sub{color:var(--txt2); font-size:13px}
.result-table{display:flex; flex-direction:column; gap:6px; margin-top:6px}
.result-row{
  display:flex; align-items:center; gap:8px; padding:9px 11px; border-radius:10px;
  background:rgba(255,255,255,.04); font-size:13px;
}
.result-row.win{background:rgba(255,197,49,.12); border:1px solid rgba(255,197,49,.3)}
.result-row .nm{flex:1}
.result-row .pts{font-variant-numeric:tabular-nums; color:var(--txt2)}
.result-cards{display:flex; flex-wrap:wrap; gap:4px; margin-top:8px}
.result-cards .ucard{--card-w:34px; --card-h:50px; width:34px; height:50px; border-radius:6px}
.result-cards .ucard .umid .big{font-size:19px; -webkit-text-stroke:1.6px rgba(0,0,0,.55)}
.result-cards .ucard .umid svg{width:16px; height:16px}
.result-cards .ucard .ucorner{display:none}

.rule-note{font-size:11.5px; color:var(--txt3); margin-top:10px}
.unlock-table{display:flex; flex-direction:column; gap:6px}
.unlock-row{
  display:grid; grid-template-columns:28px 52px 1fr auto; align-items:center; gap:9px;
  padding:9px 10px; border-radius:9px; background:rgba(255,255,255,.04);
  border:1px solid transparent; font-size:12px; color:var(--txt2);
}
.unlock-name{font-weight:700; color:var(--txt); font-size:12.5px}
.unlock-skill{color:var(--txt3); line-height:1.45}
.unlock-skill b{color:var(--gold); font-weight:700}
.unlock-cond{display:flex; align-items:center; gap:6px; white-space:nowrap; font-size:11.5px}
.unlock-tag{
  font-size:10px; font-weight:600; padding:1px 6px; border-radius:5px;
  background:rgba(255,255,255,.08); color:var(--txt3);
}

.rule-list{display:flex; flex-direction:column; gap:9px; font-size:13px; color:var(--txt2)}
.rule-list li{margin-left:16px; line-height:1.6}
.rule-list b{color:var(--txt)}

/* ---------------- toast ---------------- */
.toast-stack{
  position:fixed; left:50%; top:66px; transform:translateX(-50%); z-index:900;
  display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none;
}
.toast{
  padding:9px 16px; border-radius:11px; font-size:13.5px; font-weight:600;
  background:rgba(20,26,38,.96); border:1px solid var(--line2); color:var(--txt);
  box-shadow:0 10px 30px rgba(0,0,0,.5); animation:toastIn .22s cubic-bezier(.2,1.3,.4,1);
}
.toast.err{border-color:rgba(255,90,77,.5); color:#ffb3ab}
.toast.warn{border-color:rgba(255,197,49,.5); color:var(--gold)}
.toast.out{animation:toastOut .25s forwards}
@keyframes toastIn{from{transform:translateY(-14px); opacity:0}}
@keyframes toastOut{to{transform:translateY(-10px); opacity:0}}

.shout{
  position:fixed; left:50%; top:44%; transform:translate(-50%,-50%) rotate(-9deg);
  font-size:76px; font-weight:900; font-style:italic; color:var(--red);
  text-shadow:0 6px 0 rgba(0,0,0,.35), 0 0 60px rgba(255,75,62,.55);
  z-index:850; pointer-events:none; animation:shoutAnim .85s cubic-bezier(.2,1.4,.4,1) forwards;
}
@keyframes shoutAnim{
  0%{transform:translate(-50%,-50%) rotate(-9deg) scale(.3); opacity:0}
  35%{transform:translate(-50%,-50%) rotate(-9deg) scale(1.15); opacity:1}
  70%{transform:translate(-50%,-60%) rotate(-9deg) scale(1); opacity:1}
  100%{transform:translate(-50%,-90%) rotate(-9deg) scale(.9); opacity:0}
}

/* ---------------- 电脑版专属 ---------------- */
/* 键盘快捷键提示条：只在牌桌上显示，鼠标用户也能一眼看到 */
.kbd-hint{
  display:flex; justify-content:center; flex-wrap:wrap; gap:6px 16px;
  padding:6px 0 0; font-size:11.5px; color:var(--txt3);
}
.kbd-hint kbd{
  display:inline-block; min-width:17px; padding:1px 5px; margin:0 1px;
  border-radius:5px; background:rgba(255,255,255,.07); border:1px solid var(--line2);
  font-family:ui-monospace,Menlo,monospace; font-size:10.5px; color:var(--txt2);
  text-align:center; line-height:1.5;
}
/* 鼠标悬停：手牌抬起，指针变手型 */
.my-hand .ucard.playable:hover{cursor:pointer}
/* 桌面可点区域更精确：牌堆悬停高亮更明显 */
.pile-draw:hover .pile-back{border-color:rgba(28,39,58,.30)}

/* ---------------- 窗口变窄时的兜底（桌面版仍可用） ---------------- */
@media (max-width:1023px){
  #screen-table{grid-template-columns:1fr}
  .side-toggle{display:grid}
  .side{
    position:absolute; right:0; top:52px; bottom:0; width:280px; z-index:40;
    transform:translateX(100%); transition:transform .24s;
    background:rgba(9,12,18,.96); backdrop-filter:blur(12px);
  }
  .side.open{transform:none}
}
@media (max-width:719px){
  :root{--card-w:66px; --card-h:99px}
  .kbd-hint{display:none}
  .topbar{gap:6px; padding:8px 10px}
  .my-hand{height:calc(var(--card-h) + 20px)}
}


/* ==================== 浅色主题（用户指定：黑改白） ====================
   策略：深色样式保持不动，此段整体覆盖为白底浅色系，想回黑色删掉本段即可。
   金色统一加深（浅底上原 #ffc531 看不清）；牌背保留深色（真实 UNO 牌背）。 */
:root{
  --bg0:#eef1f6; --bg1:#ffffff; --bg2:#f6f8fb;
  --panel:rgba(28,39,58,.045);
  --line:rgba(28,39,58,.10);
  --line2:rgba(28,39,58,.18);
  --txt:#1c2534; --txt2:#5a6a83; --txt3:#93a1b5;
  --gold:#c9860a;
  --danger:#e5484d; --ok:#1aa860;
}
body{background:var(--bg0)}
/* 阳光简约背景（美图设计室素材），渐变作加载兜底；若删本段回暗色主题，需同步处理背景 */
.screen{background:url('/assets/table-desktop.jpg') center/cover no-repeat, radial-gradient(1200px 700px at 50% 12%, #ffffff 0%, #f2f4f8 55%, #e7ebf2 100%)}
.dir-svg circle{stroke:rgba(28,39,58,.10)}

/* 按钮 */
.btn{background:#fff; border-color:var(--line)}
.btn:hover{background:#f4f6fa; border-color:var(--line2)}
.btn-primary{box-shadow:0 5px 16px rgba(245,166,35,.30)}
.btn-danger{background:var(--danger)}
.btn-danger:hover{background:#f0655f}
.icon-btn{background:#fff}
.icon-btn:hover{color:var(--txt); border-color:var(--line2); background:#f4f6fa}

/* 遮罩 / 抽屉 */
.side-scrim{background:rgba(24,34,54,.38)}

/* 首页 */
.home-card{background:#fff; border-color:var(--line); box-shadow:0 20px 50px rgba(23,43,77,.10)}
.field input, .join-row input, .step-input{background:#fff; border-color:var(--line)}
.field input:focus, .join-row input:focus, .step-input:focus{border-color:var(--gold); background:#fff}
.start-block{background:rgba(28,39,58,.035); border-color:var(--line2)}

/* 大厅 */
.lobby-card{background:#fff; border-color:var(--line); box-shadow:0 20px 50px rgba(23,43,77,.10)}
.lseat{background:#fff; border-color:var(--line)}
.lseat.filled{background:#fff; border-color:var(--line2)}
.lseat.empty .av{background:rgba(28,39,58,.05); color:var(--txt3); border-color:var(--line2)}
.lseat.empty.tappable .av{background:rgba(255,197,49,.16); color:var(--gold)}
.lseat.tappable:hover{background:#fbf6e8; border-color:var(--gold)}
.seat-opt{background:#fff; border-color:var(--line)}
.seat-opt:hover{background:#f4f6fa; border-color:var(--gold)}
.seat-opt-txt i{color:var(--txt3)}
.seat-opt[data-act="wait"] .seat-opt-ico{background:rgba(80,160,230,.14); color:#3d7fc1}
.seat-opt[data-act="wait"]:hover{border-color:#3d7fc1}
.role-pick{background:#fff; border-color:var(--line); color:var(--txt2)}
.role-pick:hover{background:#f4f6fa; color:var(--txt)}
.role-pick.on{background:rgba(255,197,49,.14); border-color:var(--gold); color:var(--txt)}
.role-pick-ico{background:rgba(28,39,58,.045); border-color:var(--line)}
.role-pick.on .role-pick-ico{background:rgba(255,197,49,.18)}
.role-tag{background:rgba(28,39,58,.06); color:var(--txt3)}
.role-chip{background:rgba(28,39,58,.05); color:var(--txt3)}
.role-ico{background:rgba(28,39,58,.05); color:var(--txt3)}
.unlock-row{background:rgba(28,39,58,.035)}
.unlock-tag{background:rgba(28,39,58,.06); color:var(--txt3)}
/* 角色技能标识：实心图标 + 深色配色 + 同色底加浓，浅底上醒目 */
.role-pick-ico[data-role="shield"]{background:rgba(23,72,132,.2); color:#174884; border-color:rgba(23,72,132,.5)}
.role-pick-ico[data-role="thief"]{background:rgba(122,71,8,.18); color:#7a4708; border-color:rgba(122,71,8,.48)}
.role-pick-ico[data-role="seer"]{background:rgba(76,49,160,.17); color:#4c31a0; border-color:rgba(76,49,160,.46)}
.role-pick-ico[data-role="lucky"]{background:rgba(10,99,57,.18); color:#0a6339; border-color:rgba(10,99,57,.48)}
.role-pick-ico[data-role="pin"]{background:rgba(150,88,10,.19); color:#96580a; border-color:rgba(150,88,10,.5)}
.role-pick-ico[data-role="thorn"]{background:rgba(168,35,68,.17); color:#a82344; border-color:rgba(168,35,68,.46)}
.seat-role{background:rgba(23,72,132,.18); color:#174884; border-color:rgba(23,72,132,.42)}
.seat-role[data-role="shield"]{background:rgba(23,72,132,.18); color:#174884; border-color:rgba(23,72,132,.42)}
.seat-role[data-role="thief"]{background:rgba(122,71,8,.17); color:#7a4708; border-color:rgba(122,71,8,.4)}
.seat-role[data-role="seer"]{background:rgba(76,49,160,.16); color:#4c31a0; border-color:rgba(76,49,160,.4)}
.seat-role[data-role="lucky"]{background:rgba(10,99,57,.17); color:#0a6339; border-color:rgba(10,99,57,.4)}
.seat-role[data-role="pin"]{background:rgba(150,88,10,.18); color:#96580a; border-color:rgba(150,88,10,.42)}
.seat-role[data-role="thorn"]{background:rgba(168,35,68,.16); color:#a82344; border-color:rgba(168,35,68,.38)}
.role-chip[data-role="shield"]{background:rgba(23,72,132,.16); color:#174884}
.role-chip[data-role="thief"]{background:rgba(122,71,8,.15); color:#7a4708}
.role-chip[data-role="seer"]{background:rgba(76,49,160,.14); color:#4c31a0}
.role-chip[data-role="lucky"]{background:rgba(10,99,57,.15); color:#0a6339}
.role-chip[data-role="pin"]{background:rgba(150,88,10,.16); color:#96580a}
.role-chip[data-role="thorn"]{background:rgba(168,35,68,.14); color:#a82344}

/* 顶栏 / 牌桌 */
.topbar{background:rgba(255,255,255,.88); border-color:var(--line)}
.pill{background:#fff}
.turn-timer{background:#fff}
.turn-timer .tt-bg{stroke:rgba(28,39,58,.12)}
.turn-timer.tt-mine{box-shadow:0 0 0 1px rgba(201,134,10,.22) inset}
.turn-timer.urgent{background:rgba(229,72,77,.12)}
.turn-timer .tt-num{color:var(--txt)}
.turn-timer.urgent .tt-num{color:var(--danger); text-shadow:0 0 8px rgba(229,72,77,.30)}
.pcard{background:#fff; border-color:var(--line)}
.mini-card{background:linear-gradient(150deg,#eef1f6,#dde3ec); border-color:rgba(28,39,58,.15); box-shadow:0 2px 5px rgba(23,43,77,.12)}
.uno-flag{box-shadow:0 3px 10px rgba(255,75,62,.28)}
.uno-flag.gold{box-shadow:0 3px 10px rgba(255,197,49,.32)}
.pile-count{background:#fff; border-color:var(--line2); color:var(--txt2)}
.turn-banner{background:rgba(255,255,255,.92); border-color:var(--line); color:var(--txt2)}
.color-badge{background:rgba(255,255,255,.92); border-color:var(--line); color:var(--txt2)}
.ucard{box-shadow:0 4px 14px rgba(23,43,77,.18)}
.my-hand .ucard.playable:hover{box-shadow:0 14px 30px rgba(23,43,77,.28)}
.mini-hand .mini-card{border-color:rgba(28,39,58,.15)}

/* 侧栏 */
.side{background:rgba(255,255,255,.75); border-color:var(--line)}
.score-row{background:rgba(28,39,58,.035)}
.log-list::-webkit-scrollbar-thumb{background:rgba(28,39,58,.18)}
.log-item{background:rgba(28,39,58,.04); color:var(--txt2)}

/* 弹层 */
.overlay{background:rgba(18,28,48,.42)}
.modal{background:#fff; border-color:var(--line); box-shadow:0 24px 70px rgba(23,43,77,.18)}
.btn-skill{border-color:rgba(140,90,220,.4); color:#6d3fc0}
.btn-skill:hover{background:linear-gradient(180deg, rgba(180,140,255,.4), rgba(140,90,220,.4))}
.skill-ready-note{color:#3b6ea5}
.freeze-opt{background:#fff; border-color:var(--line)}
.freeze-opt:hover{background:#f4f6fa; border-color:var(--line2)}
.freeze-opt .role-chip{background:rgba(28,39,58,.05); color:var(--txt3)}
.result-row{background:rgba(28,39,58,.035)}
.result-row .pts{color:var(--txt2)}
.rule-note{color:var(--txt3)}
kbd{background:rgba(28,39,58,.06); border-color:var(--line2); color:var(--txt2)}
.kbd-hint kbd{background:rgba(28,39,58,.06); border-color:var(--line2); color:var(--txt2)}

/* toast / 喊话 */
.toast{background:#fff; border-color:var(--line2); color:var(--txt); box-shadow:0 10px 30px rgba(23,43,77,.16)}
.toast.err{color:#c93a35}
.shout{text-shadow:0 5px 0 rgba(0,0,0,.10), 0 0 46px rgba(255,75,62,.30)}
.armed-tag{
  display:inline-block; font-size:9.5px; font-weight:700; padding:1px 5px; border-radius:5px; margin-left:3px;
  background:rgba(255,197,49,.20); border:1px solid rgba(201,134,10,.5); color:#a06e08; vertical-align:1px;
}

/* ==================== 阳光简约头像（美图设计室素材） ====================
   avatars-grid.jpg 为 4x2 等分网格（2048x1024），用百分比定位取对应格子；
   座位 38px / 牌桌 40px 圆形裁切，同图缓存全站共享。 */
.av.has-ava{
  background-color:#f7f2e8;
  background-image:url('/assets/avatars-grid.jpg');
  background-size:400% 200%;
  background-repeat:no-repeat;
  border:1.5px solid rgba(28,39,58,.10);
  box-shadow:0 2px 8px rgba(28,39,58,.14);
}
.ava-0{background-position:0% 0%}
.ava-1{background-position:33.333% 0%}
.ava-2{background-position:66.667% 0%}
.ava-3{background-position:100% 0%}
.ava-4{background-position:0% 100%}
.ava-5{background-position:33.333% 100%}
.ava-6{background-position:66.667% 100%}
.ava-7{background-position:100% 100%}

/* ==================== 出牌时限倒计时 + 再来一局 ==================== */
/* 整体设计：环形进度 + 大号数字 + 回合归属徽章，让玩家一眼看清"还剩几秒、是谁在拖"
   - 默认态：环形按剩余比例从满到空，颜色随剩余时长从绿（充足）→ 黄（中）→ 红（紧急）
   - 紧急态（≤5s）：整块 pill 变红 + 脉冲放大 + 数字加粗加大 + 数字阴影发红
   - 我方回合：归属徽章用金色描边，让玩家一眼分辨"是我在拖还是对手在拖"
*/
.turn-timer{
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 14px 5px 5px; border-radius:24px;
  font-size:14px; color:var(--txt); font-weight:600;
  background:var(--panel); border:1px solid var(--line);
  transition:background .25s, border-color .25s, color .25s, transform .25s, box-shadow .25s;
}
.turn-timer .tt-ring{width:30px; height:30px; flex:0 0 auto; transform:rotate(-90deg)}
.turn-timer .tt-bg{fill:none; stroke:var(--line2); stroke-width:3.4}
.turn-timer .tt-arc{
  fill:none; stroke:var(--ok); stroke-width:3.4; stroke-linecap:round;
  transition:stroke-dashoffset .22s linear, stroke .25s;
}
.turn-timer .tt-mid .tt-arc{stroke:#ff9f1c}
.turn-timer .tt-low .tt-arc{stroke:var(--danger)}
.turn-timer .tt-num{
  font-size:22px; font-weight:800; line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--txt); min-width:32px; text-align:center;
  transition:color .25s, font-size .25s, text-shadow .25s;
}
.turn-timer .tt-unit{font-size:13px; color:var(--txt2); margin-left:1px; margin-right:2px; font-weight:600}
.turn-timer .tt-owner{
  font-size:12px; padding:3px 8px; border-radius:11px;
  background:rgba(0,0,0,.12); color:var(--txt2);
  border:1px solid transparent;
  transition:background .25s, color .25s, border-color .25s;
}
.turn-timer.tt-mine .tt-owner{background:rgba(255,197,49,.18); color:var(--gold); border-color:rgba(255,197,49,.45)}
.turn-timer.tt-mine{box-shadow:0 0 0 1px rgba(255,197,49,.20) inset}
/* 紧急态（≤5s）：整块变红 + 脉冲 + 数字加粗 + 描红 */
.turn-timer.urgent{
  background:rgba(229,72,77,.14); border-color:rgba(229,72,77,.55); color:var(--danger);
  animation:tt-urgent-pulse .65s ease-in-out infinite;
}
.turn-timer.urgent .tt-arc{stroke:var(--danger)}
.turn-timer.urgent .tt-num{color:var(--danger); font-size:26px; text-shadow:0 0 8px rgba(229,72,77,.35)}
.turn-timer.urgent .tt-unit{color:var(--danger)}
.turn-timer.urgent .tt-owner{background:rgba(229,72,77,.20); color:var(--danger); border-color:rgba(229,72,77,.45)}
@keyframes tt-urgent-pulse{
  0%,100%{transform:scale(1); box-shadow:0 0 0 0 rgba(229,72,77,0)}
  50%{transform:scale(1.08); box-shadow:0 0 0 5px rgba(229,72,77,.22)}
}
.restart-wait{font-size:12.5px; color:var(--txt3); display:flex; align-items:center}

/* ================= 摸头嘲讽特效 ================= */
.btn.btn-taunt{background:linear-gradient(180deg,#ff9f43,#ff7043); border:1px solid #f4511e; color:#fff; font-weight:700}
.btn.btn-taunt:hover{background:linear-gradient(180deg,#ffab5e,#ff8148)}
.btn.btn-taunt:disabled{opacity:.45; cursor:default}
#tauntFx{position:fixed; inset:0; z-index:9000; pointer-events:none; display:none}
#tauntFx.is-run{display:block}
#tauntFx .taunt-hand{
  position:absolute; top:4%; left:50%;
  width:clamp(110px,15vmin,170px);
  transform:translate(-50%,-185%);
  will-change:transform,opacity;
  animation:tauntSwing 2.4s cubic-bezier(.34,1.3,.5,1) both;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.3));
}
#tauntFx .taunt-text{
  position:absolute; top:34%; left:50%;
  font-weight:800; font-size:clamp(17px,3vmin,28px); color:#fff;
  background:linear-gradient(135deg,#ff9f43,#f4511e);
  padding:10px 24px; border-radius:999px; white-space:nowrap;
  box-shadow:0 10px 28px rgba(244,81,30,.42);
  transform:translateX(-50%) scale(.6);
  will-change:transform,opacity;
  animation:tauntPop 2.3s ease both;
}
/* 手：伸入 → 左右揉搓 → 退出（全程仅 transform/opacity，走合成层不掉帧） */
@keyframes tauntSwing{
  0%   {transform:translate(-50%,-185%) rotate(0deg) scale(1); opacity:0; animation-timing-function:cubic-bezier(.34,1.56,.55,1)}
  12%  {transform:translate(-50%,-4%) rotate(0deg) scale(1); opacity:1; animation-timing-function:ease-in-out}
  20%  {transform:translate(-50%,1%) rotate(-9deg) scale(1.05)}
  30%  {transform:translate(-50%,-2%) rotate(9deg) scale(1)}
  40%  {transform:translate(-50%,1%) rotate(-8deg) scale(1.04)}
  50%  {transform:translate(-50%,-2%) rotate(8deg) scale(1)}
  60%  {transform:translate(-50%,1%) rotate(-7deg) scale(1.03)}
  70%  {transform:translate(-50%,-1%) rotate(6deg) scale(1)}
  80%  {transform:translate(-50%,0) rotate(0deg) scale(1); opacity:1}
  100% {transform:translate(-50%,-190%) rotate(0deg) scale(1); opacity:0}
}
@keyframes tauntPop{
  0%   {opacity:0; transform:translateX(-50%) translateY(8px) scale(.6)}
  14%  {opacity:1; transform:translateX(-50%) translateY(0) scale(1.1)}
  24%  {opacity:1; transform:translateX(-50%) translateY(0) scale(1)}
  82%  {opacity:1; transform:translateX(-50%) translateY(0) scale(1)}
  100% {opacity:0; transform:translateX(-50%) translateY(-6px) scale(.92)}
}

/* ================= 游戏内语音（开麦按钮） ================= */
.voice-btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 16px; border-radius:999px; border:none; cursor:pointer;
  background:linear-gradient(180deg,#34a853,#1e8e3e);
  color:#fff; font-weight:800; font-size:14px; line-height:1;
  box-shadow:0 3px 10px rgba(30,142,62,.35);
  position:relative; flex:none;
}
.voice-btn:hover{filter:brightness(1.08)}
.voice-btn .ico-mic{width:17px; height:17px; flex:none}
.voice-btn.is-on{
  background:linear-gradient(180deg,#e53935,#c62828);
  box-shadow:0 3px 10px rgba(198,40,40,.4);
  animation:voicePulse 1.6s ease-in-out infinite;
}
.voice-count{
  position:absolute; top:-6px; right:-6px;
  min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:#1e88e5; color:#fff; font-size:11px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
@keyframes voicePulse{
  0%,100%{box-shadow:0 3px 10px rgba(198,40,40,.4), 0 0 0 0 rgba(229,57,53,.45)}
  50%{box-shadow:0 3px 10px rgba(198,40,40,.4), 0 0 0 8px rgba(229,57,53,0)}
}


/* 声音键（音效 + 语音接收总开关）：跟随开麦键，关=灰、开=青蓝 */
.voice-btn.voice-sound{background:linear-gradient(180deg,#90a4ae,#607d8b); box-shadow:0 3px 10px rgba(96,125,139,.3)}
.voice-btn.voice-sound.is-on{background:linear-gradient(180deg,#29b6f6,#0288d1); box-shadow:0 3px 10px rgba(2,136,209,.35); animation:none}


/* 结算暗化：gameover 时牌桌降透明度、禁交互，焦点让给结算弹层（弹层在牌桌外层不受影响） */
#screen-table{transition:opacity .35s ease, filter .35s ease}
body.is-gameover #screen-table{opacity:.45; filter:saturate(.55)}
body.is-gameover #screen-table *{pointer-events:none}

/* ============ 联机聊天 ============ */
.chat-fab{
  position:fixed; left:18px; bottom:18px; z-index:60;
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(180deg,var(--gold),#e0a800);
  color:#1a1300; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.4);
}
.chat-fab .ico-chat{width:26px; height:26px}
.chat-fab:hover{filter:brightness(1.06)}
/* 尊重 hidden 属性：否则上面的 display:flex 会盖掉 [hidden] 的 display:none，导致首页也显示聊天 */
.chat-fab[hidden], .chat-panel[hidden]{display:none}

.chat-badge{
  position:absolute; top:-3px; right:-3px; min-width:20px; height:20px; padding:0 5px;
  background:var(--danger); color:#fff; font-size:11px; font-weight:800;
  border-radius:10px; display:flex; align-items:center; justify-content:center;
  border:2px solid var(--bg0);
}

.chat-panel{
  position:fixed; left:18px; bottom:18px; z-index:60;
  width:320px; max-width:calc(100vw - 36px); height:420px; max-height:calc(100vh - 120px);
  background:var(--bg1); border:1px solid var(--line2); border-radius:16px;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,.5);
}
.chat-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; border-bottom:1px solid var(--line); font-weight:700; color:var(--txt);
}
.chat-close{background:none; border:none; color:var(--txt2); cursor:pointer; padding:4px; border-radius:8px}
.chat-close:hover{color:var(--txt); background:var(--panel)}
.chat-close svg{width:18px; height:18px; display:block}

.chat-msgs{flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px}
.chat-msg{font-size:13px; line-height:1.5; color:var(--txt2); word-break:break-word}
.chat-msg .chat-name{color:var(--gold); font-weight:700; margin-right:2px}
.chat-msg.mine{color:var(--txt)}
.chat-msg.mine .chat-name{color:var(--ok)}

.chat-input{display:flex; gap:8px; padding:10px; border-top:1px solid var(--line); background:var(--bg2)}
.chat-input input{
  flex:1; min-width:0; background:var(--bg0); border:1px solid var(--line);
  border-radius:10px; padding:9px 11px; color:var(--txt); font-size:14px;
}
.chat-input input:focus{border-color:var(--gold); outline:none}
.chat-input .btn{padding:0 16px}

/* 大厅准备状态 */
.ready-badge{display:inline-block; margin-top:5px; font-size:11px; font-weight:700; padding:1px 8px; border-radius:8px; background:rgba(120,130,145,.18); color:#7a8699}
.ready-badge.on{background:rgba(46,160,67,.18); color:#2ea043}
.btn.is-ready{background:linear-gradient(180deg,#34c759,#1f9d3a); border-color:#1f9d3a; color:#fff}