:root{
  --r:#e0453e; --g:#3ba55d; --b:#2f7fd1; --y:#e8b62c;
  --felt:#12503a; --felt2:#0b3627;
  --panel:rgba(9,30,22,.82);
  --line:rgba(255,255,255,.14);
  --txt:#f2f7f4; --dim:#9fb8ac;
  --gold:#ffd76e;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  margin:0; font-family:"PingFang SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--txt);
  background:radial-gradient(circle at 50% 30%, #1a6b4d 0%, var(--felt) 42%, var(--felt2) 100%);
  overflow:hidden;
}
button{font-family:inherit; cursor:pointer; border:none; outline:none;}
input{font-family:inherit; outline:none;}
.hide{display:none !important;}
.view{position:absolute; inset:0;}
.spacer{flex:1;}

/* ---------- 通用组件 ---------- */
.btn{
  background:linear-gradient(180deg,#2fbd74,#1e8f56); color:#fff; font-weight:700;
  padding:11px 20px; border-radius:10px; font-size:15px; letter-spacing:.5px;
  box-shadow:0 4px 0 #14603a, 0 6px 14px rgba(0,0,0,.3); transition:transform .08s, box-shadow .08s;
}
.btn:active{transform:translateY(3px); box-shadow:0 1px 0 #14603a;}
.btn.ghost{background:rgba(255,255,255,.1); box-shadow:0 4px 0 rgba(0,0,0,.25);}
.btn.blue{background:linear-gradient(180deg,#4a9fe8,#2c74bb); box-shadow:0 4px 0 #1d5185;}
.btn:disabled{opacity:.4; cursor:not-allowed; box-shadow:0 4px 0 rgba(0,0,0,.25); transform:none;}
.card-panel{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  backdrop-filter:blur(8px); box-shadow:0 12px 40px rgba(0,0,0,.35);
}

/* ---------- 大厅 ---------- */
#lobby{display:flex; align-items:center; justify-content:center; padding:20px;}
.lobby-box{width:min(440px,100%); padding:28px 26px; text-align:center; max-height:94vh; overflow-y:auto;}
.logo{font-size:40px; font-weight:900; letter-spacing:3px; margin-bottom:4px;
  background:linear-gradient(180deg,#ffdf6e,#e8b62c 55%,#c98f0d);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 3px 0 rgba(0,0,0,.25);}
.logo small{display:block; font-size:12px; letter-spacing:6px; color:var(--dim);
  -webkit-text-fill-color:var(--dim); font-weight:600; margin-top:6px;}
.field{margin-top:16px; text-align:left;}
.field label{font-size:12px; color:var(--dim); margin-bottom:6px; display:block; letter-spacing:1px;}
.field input{
  width:100%; padding:12px 14px; border-radius:10px; font-size:16px;
  background:rgba(0,0,0,.32); border:1px solid var(--line); color:var(--txt);
}
.field input::placeholder{color:#6d857a;}
.row{display:flex; gap:10px; margin-top:16px;}
.row .btn{flex:1; padding:13px 10px;}
.err{color:#ffb3aa; font-size:13px; margin-top:12px; min-height:18px;}

.game-picker{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.game-opt{
  padding:12px 10px; border-radius:12px; background:rgba(255,255,255,.06);
  border:2px solid transparent; text-align:left; transition:.15s; color:var(--txt);
}
.game-opt.on{border-color:var(--gold); background:rgba(255,215,110,.12); box-shadow:0 0 18px rgba(255,215,110,.18);}
.game-opt .gn{font-size:16px; font-weight:800;}
.game-opt .gt{font-size:11px; color:var(--dim); margin-top:3px; line-height:1.5;}
.game-opt .gp{font-size:11px; color:var(--gold); margin-top:5px; font-weight:700;}

/* ---------- 等待厅 ---------- */
#room{display:flex; align-items:center; justify-content:center; padding:16px;}
.room-box{width:min(540px,100%); padding:24px; max-height:94vh; overflow-y:auto;}
.room-head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.room-head-right{display:flex; align-items:center; gap:8px;}
.game-chip{font-size:12px; font-weight:700; padding:6px 12px; border-radius:8px;
  background:rgba(255,215,110,.16); color:var(--gold); border:1px solid rgba(255,215,110,.3);}
.room-code{font-size:13px; color:var(--dim);}
.room-code b{font-size:30px; letter-spacing:6px; color:var(--gold); display:block; margin-top:2px; font-variant-numeric:tabular-nums;}
.copy{font-size:12px; padding:7px 12px; border-radius:8px; background:rgba(255,255,255,.12); color:var(--txt); font-weight:600;}
.plist{margin-top:18px; display:flex; flex-direction:column; gap:8px;}
.pitem{display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:10px;
  background:rgba(255,255,255,.06); border:1px solid var(--line);}
.avatar{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:14px; color:#08231a; flex:0 0 auto;}
.pitem .nm{font-weight:600; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tag{font-size:11px; padding:3px 8px; border-radius:6px; background:rgba(255,255,255,.14); color:var(--dim); font-weight:600;}
.tag.host{background:#c9a227; color:#3a2c00;}
.tag.off{background:#7a3b34; color:#ffd7d0;}
.settings-box{margin-top:16px; display:flex; flex-direction:column; gap:9px;}
.setting{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; border-radius:10px; background:rgba(255,255,255,.05); border:1px solid var(--line);}
.setting .t{font-size:14px; font-weight:600;}
.setting .d{font-size:11px; color:var(--dim); margin-top:3px; line-height:1.6;}
.switch{width:50px; height:28px; border-radius:14px; background:#3b5148; position:relative; transition:.2s; flex:0 0 auto;}
.switch.on{background:#2fbd74;}
.switch i{position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; transition:.2s;}
.switch.on i{left:25px;}
.hintline{font-size:12px; color:var(--dim); margin-top:14px; text-align:center; line-height:1.7;}

/* ---------- 顶栏 / 座位 ---------- */
.topbar{display:flex; align-items:center; gap:10px; padding:8px 12px; flex:0 0 auto;}
.topbar .room-mini{font-size:12px; color:var(--dim);}
.topbar .room-mini b{color:var(--gold); font-size:15px; letter-spacing:2px;}
.icon-btn{width:34px; height:34px; border-radius:9px; background:rgba(0,0,0,.3); color:var(--txt);
  font-size:16px; display:grid; place-items:center; border:1px solid var(--line); font-weight:700;}
.seats{display:flex; gap:8px; padding:0 12px 6px; overflow-x:auto; flex:0 0 auto;}
.seat{flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:7px 12px 7px 8px; border-radius:12px;
  background:rgba(0,0,0,.28); border:1px solid transparent; transition:.2s;}
.seat.active{border-color:var(--gold); background:rgba(255,215,110,.14); box-shadow:0 0 16px rgba(255,215,110,.22);}
.seat .nm{font-size:13px; font-weight:600; max-width:88px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.seat .cnt{font-size:11px; color:var(--dim); font-variant-numeric:tabular-nums;}
.seat.off{opacity:.45;}
.seat .uno-badge{font-size:10px; font-weight:800; background:#e0453e; color:#fff; padding:2px 6px; border-radius:5px;}
.seat .crown{font-size:13px;}

/* ---------- 桌面通用 ---------- */
.table-area{flex:1; position:relative; display:flex; flex-direction:column; min-height:0; gap:8px; overflow:hidden;}
.table-top{flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:6px;}
.table-main{flex:1 1 auto; display:flex; align-items:center; justify-content:center;
  gap:min(6vw,52px); min-height:0; overflow:hidden;}

/* ---------- UNO 桌面 ---------- */
.pile{position:relative; display:flex; flex-direction:column; align-items:center; gap:10px;}
.pile .lbl{font-size:11px; color:var(--dim); letter-spacing:1px;}
.card{
  width:74px; height:110px; border-radius:9px; position:relative; flex:0 0 auto;
  background:#111; border:3px solid #fff; box-shadow:0 5px 14px rgba(0,0,0,.42);
  transition:transform .12s, box-shadow .12s; user-select:none; overflow:hidden;
}
.card.r{background:var(--r);} .card.g{background:var(--g);}
.card.b{background:var(--b);} .card.y{background:var(--y);}
.card.w{background:#20232a;}
.card .oval{position:absolute; inset:9% 7%; background:#fff; border-radius:50%; transform:rotate(-22deg);
  display:grid; place-items:center;}
.card .oval span{transform:rotate(22deg); font-weight:900; font-size:30px; line-height:1;
  color:#111; font-family:"Arial Black",Impact,sans-serif;}
.card.r .oval span{color:var(--r);} .card.g .oval span{color:var(--g);}
.card.b .oval span{color:var(--b);} .card.y .oval span{color:#b8890f;}
.card .corner{position:absolute; font-size:13px; font-weight:900; color:#fff;
  font-family:"Arial Black",Impact,sans-serif; text-shadow:0 1px 2px rgba(0,0,0,.4);}
.card .corner.tl{top:4px; left:6px;}
.card .corner.br{bottom:4px; right:6px; transform:rotate(180deg);}
.card.w .wq{position:absolute; inset:9% 7%; border-radius:50%; transform:rotate(-22deg); overflow:hidden;
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;}
.card.w .wq i{display:block;}
.card.w .wq i:nth-child(1){background:var(--r);}
.card.w .wq i:nth-child(2){background:var(--b);}
.card.w .wq i:nth-child(3){background:var(--y);}
.card.w .wq i:nth-child(4){background:var(--g);}
.deck-stack{position:relative; width:74px; height:110px; cursor:pointer; transition:transform .12s;}
.deck-stack:active{transform:scale(.96);}
.deck-stack .back{position:absolute; inset:0; border-radius:9px; border:3px solid #fff; background:#1a1d24;
  box-shadow:0 5px 14px rgba(0,0,0,.42); overflow:hidden;}
.deck-stack .back::after{content:""; position:absolute; inset:11% 8%; border-radius:50%; transform:rotate(-22deg);
  background:linear-gradient(135deg,var(--r) 0 25%,var(--b) 25% 50%,var(--y) 50% 75%,var(--g) 75% 100%);}
.deck-stack .l1{transform:translate(4px,4px) rotate(3deg); opacity:.85;}
.deck-stack .l2{transform:translate(8px,8px) rotate(6deg); opacity:.6;}
.deck-stack .cnt-badge{position:absolute; right:-8px; bottom:-8px; z-index:5; background:#0d1f18;
  border:1px solid var(--line); border-radius:8px; padding:2px 7px; font-size:11px; font-weight:700; color:var(--gold);}
.deck-stack.disabled{filter:grayscale(.7) brightness(.6); cursor:not-allowed;}
.deck-stack.disabled:active{transform:none;}
.center-info{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px;
  font-size:12px; color:var(--dim);}
.dir-badge{display:inline-flex; align-items:center; gap:5px; background:rgba(0,0,0,.3);
  padding:4px 10px; border-radius:20px; border:1px solid var(--line);}
.pending-badge{background:#c93f31; color:#fff; padding:4px 10px; border-radius:20px; font-weight:800;}
.color-dot{width:14px; height:14px; border-radius:50%; border:2px solid rgba(255,255,255,.6); display:inline-block;}
.banner{background:rgba(0,0,0,.72); padding:7px 16px; border-radius:20px; font-size:13px; font-weight:600;
  border:1px solid var(--line); white-space:nowrap; max-width:92vw; overflow:hidden; text-overflow:ellipsis;
  box-shadow:0 6px 18px rgba(0,0,0,.35); text-align:center;}

/* ---------- 保皇桌面 ---------- */
.table-area.bh{overflow:hidden;}
.table-area.bh .table-main{align-items:flex-start;}
.bh-last{display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:14px 20px; border-radius:16px; background:rgba(0,0,0,.22);
  border:1px dashed rgba(255,255,255,.16); min-width:min(360px,86vw); max-width:92vw;}
.bh-last-title{font-size:13px; color:var(--dim); font-weight:600;}
.bh-last-cards{display:flex; gap:6px; flex-wrap:wrap; justify-content:center;}
.bh-meta{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; font-size:12px; color:var(--dim);}

/* 扑克牌面：点数/花色走左上角，右下角放淡化大花色水印
   —— 这样多张同点数牌叠放时，只露出左侧窄条也能看清点数与花色 */
.pcard{
  width:50px; height:70px; border-radius:6px; background:#fdfdfd; color:#1b1b1b;
  border:1px solid rgba(0,0,0,.22); position:relative; flex:0 0 auto;
  box-shadow:0 3px 8px rgba(0,0,0,.35); transition:transform .1s, box-shadow .1s;
  font-family:"Arial Black","PingFang SC",sans-serif; user-select:none;
  overflow:hidden; cursor:pointer;
}
.pcard.red{color:#d02b22;}
.pcard .r{position:absolute; top:4px; left:6px; font-size:16px; line-height:1; font-weight:900;}
.pcard .s{position:absolute; top:23px; left:7px; font-size:13px; line-height:1;}
.pcard .big{position:absolute; right:-5px; bottom:-10px; font-size:44px; line-height:1; opacity:.13;}
.pcard.two .r{font-size:14px; letter-spacing:-.5px;}
.pcard.joker{background:linear-gradient(160deg,#fff8e6,#ffe9b8);}
.pcard.joker .r{font-size:14px;}
/* 皇牌（大王）/ 保牌（小王）：左侧色条 + 左下角徽章 —— 叠放只露左窄条时也看得见 */
.pcard.emperor{background:linear-gradient(160deg,#fffdf2,#ffe6a8);}
.pcard.guard{background:linear-gradient(160deg,#f6fbff,#d3e9ff);}
.pcard.emperor::after,.pcard.guard::after{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; z-index:2;}
.pcard.emperor::after{background:linear-gradient(180deg,#ffd76e,#d99b0c);}
.pcard.guard::after{background:linear-gradient(180deg,#8fcbf5,#3b8ed6);}
.pcard .ctag{position:absolute; left:4px; bottom:0; z-index:3; line-height:13px; padding:0 4px;
  font-size:9px; font-weight:900; border-radius:0 6px 0 0; letter-spacing:0;}
.pcard .ctag.em{background:#e0a51a; color:#3a2c00;}
.pcard .ctag.gd{background:#3b8ed6; color:#f2f9ff;}
.pcard.small .ctag{font-size:8px; line-height:11px; padding:0 3px;}
.pcard.sel{transform:translateY(-14px); box-shadow:0 0 0 3px var(--gold), 0 8px 16px rgba(0,0,0,.5);}
.pcard.small{width:36px; height:50px; border-radius:5px;}
.pcard.small .r{top:3px; left:4px; font-size:13px;}
.pcard.small .s{top:18px; left:5px; font-size:10px;}
.pcard.small .big{font-size:30px; right:-4px; bottom:-7px;}
.pcard.small.two .r{font-size:11px;}

/* ---------- 手牌区 ---------- */
.myarea{flex:0 0 auto; padding:6px 12px 14px; position:relative;}
.myhead{display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap;}
.myhead .me{font-size:13px; font-weight:700;}
.myhead .sub{font-size:11px; color:var(--dim);}
.selinfo{font-size:12px; color:var(--gold); font-weight:700;}
.hand{display:flex; gap:8px; overflow-x:auto; padding:14px 2px 8px; scrollbar-width:thin; min-height:96px;}
.hand.poker{gap:0; align-items:flex-end; padding-top:20px;}
.hand .card{cursor:pointer;}
.hand .card.playable{box-shadow:0 0 0 3px var(--gold), 0 6px 16px rgba(0,0,0,.5); transform:translateY(-8px);}
.hand .card.dim{filter:brightness(.55) saturate(.6); cursor:not-allowed;}
.hand .card.sel{transform:translateY(-16px); box-shadow:0 0 0 3px #7ce8a8, 0 8px 18px rgba(0,0,0,.55);}
.hand .card.playable:hover{transform:translateY(-14px);}
.hand .card.sel:hover{transform:translateY(-18px);}

/* 同点数一组：横向叠放，只露出左侧窄条（角标布局保证点数不被裁掉），
   组内轻微阶梯抬升做扇形感，右上角挂张数徽章 */
.rank-group{position:relative; display:flex; align-items:flex-end;
  margin-right:12px; padding:0 12px 4px 0;
  border-right:1px dashed rgba(255,255,255,.12);}
.rank-group:last-child{border-right:none; margin-right:0; padding-right:2px;}
.rank-group .pcard + .pcard{margin-left:-20px;}
.rank-group .pcard:nth-child(2){margin-bottom:1px;}
.rank-group .pcard:nth-child(3){margin-bottom:2px;}
.rank-group .pcard:nth-child(4){margin-bottom:3px;}
.rank-group .pcard:nth-child(n+5){margin-bottom:4px;}
.rank-group .pcard:hover{z-index:5;}
.rank-group .pcard.sel{z-index:6;}
.rank-group .grp-cnt{position:absolute; top:-8px; right:8px; z-index:12;
  min-width:20px; text-align:center; padding:0 5px;
  background:rgba(8,12,10,.88); border:1px solid var(--line); border-radius:10px;
  color:var(--gold); font-size:11px; font-weight:800; line-height:16px;
  font-variant-numeric:tabular-nums; pointer-events:none;}
.rank-group:last-child .grp-cnt{right:0;}
.actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.actions .btn{padding:10px 18px; font-size:14px;}
.uno-btn{background:linear-gradient(180deg,#ff6a5c,#d92e1e); box-shadow:0 4px 0 #8e1a10, 0 0 22px rgba(255,80,60,.6);
  font-size:18px; letter-spacing:2px; animation:pulse 1s infinite;}
@keyframes pulse{0%,100%{transform:scale(1);} 50%{transform:scale(1.06);}}

/* ---------- 日志 / 弹层 ---------- */
.log-drawer{position:absolute; right:10px; top:56px; width:min(300px,76vw); max-height:52vh; overflow-y:auto;
  padding:12px 14px; font-size:12.5px; line-height:1.85; color:#d7e6de; z-index:40;}
.log-drawer div{border-bottom:1px dashed rgba(255,255,255,.07); padding:3px 0;}
.log-drawer div:last-child{border-bottom:none;}
.log-drawer::-webkit-scrollbar{width:5px;}
.log-drawer::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2); border-radius:3px;}
.overlay{position:absolute; inset:0; background:rgba(0,0,0,.62); display:grid; place-items:center; z-index:60; padding:20px;}
.modal{width:min(440px,100%); padding:24px; text-align:center; max-height:88vh; overflow-y:auto;}
.modal h3{margin:0 0 6px; font-size:20px;}
.modal p{margin:0; font-size:13px; color:var(--dim); line-height:1.7;}
.color-picker{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px;}
.color-picker button{height:66px; border-radius:12px; font-size:15px; font-weight:800; color:#fff;
  box-shadow:0 4px 0 rgba(0,0,0,.35); text-shadow:0 1px 3px rgba(0,0,0,.4);}
.color-picker button:active{transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.35);}
.rules-modal{text-align:left; width:min(520px,100%);}
.rules-modal h3{text-align:center; margin-bottom:14px;}
.rules-body{font-size:13.5px; line-height:1.85; color:#d7e6de;}
.rules-body .rsec{margin-bottom:14px;}
.rules-body .rsec h4{margin:0 0 5px; font-size:13px; color:var(--gold); letter-spacing:1px;}
.rules-body .rsec li{margin-left:-8px; list-style:none; padding-left:14px; position:relative; margin-bottom:3px;}
.rules-body .rsec li::before{content:"·"; position:absolute; left:2px; color:var(--dim);}
.rules-body .rset{background:rgba(255,255,255,.06); border-radius:9px; padding:10px 12px; margin-bottom:14px; font-size:12.5px;}
.rules-body .rset b{color:var(--gold);}
.rank-list{margin:16px 0 4px; text-align:left;}
.rank-item{display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:9px;
  background:rgba(255,255,255,.06); margin-bottom:7px; font-size:14px;}
.rank-item .no{font-weight:900; color:var(--gold); width:26px;}
.rank-item .cd{margin-left:auto; font-size:12px; color:var(--dim);}
.reveal-box{margin-top:14px; padding:12px; border-radius:10px; background:rgba(255,215,110,.12);
  border:1px solid rgba(255,215,110,.3); font-size:13px; line-height:1.9; text-align:left;}
.reveal-box b{color:var(--gold);}
.reveal-box .reveal-title{font-weight:700; margin-bottom:6px;}
.reveal-box .reveal-line{display:flex; gap:8px;}
.reveal-box .reveal-line b{margin-left:auto;}
.toast{position:absolute; left:50%; bottom:22%; transform:translateX(-50%);
  background:rgba(200,50,40,.94); color:#fff; padding:10px 20px; border-radius:10px;
  font-size:14px; font-weight:600; z-index:80; box-shadow:0 8px 24px rgba(0,0,0,.4);
  animation:toastIn .2s ease; max-width:86vw; text-align:center;}
@keyframes toastIn{from{opacity:0; transform:translate(-50%,10px);} to{opacity:1; transform:translate(-50%,0);}}
.conn-badge{position:absolute; left:12px; top:8px; font-size:11px; padding:3px 9px; border-radius:20px;
  background:rgba(0,0,0,.35); color:var(--dim); z-index:50;}
.conn-badge.bad{background:#8e2a20; color:#ffd7d0;}

@media (max-width:640px){
  .card{width:58px; height:86px; border-radius:7px;}
  .card .oval span{font-size:23px;}
  .card .corner{font-size:11px;}
  .deck-stack{width:58px; height:86px;}
  .table-main{gap:26px;}
  .logo{font-size:34px;}
  .pcard{width:42px; height:60px;}
  .pcard .r{top:3px; left:5px; font-size:14px;}
  .pcard .s{top:20px; left:5px; font-size:11px;}
  .pcard .big{font-size:36px;}
  .pcard.two .r{font-size:12px;}
  .rank-group .pcard + .pcard{margin-left:-18px;}
  .rank-group{margin-right:9px; padding-right:9px;}
  .hand.poker{min-height:86px; padding-top:18px;}
}
@media (max-height:600px){
  .card{width:52px; height:78px;}
  .card .oval span{font-size:20px;}
  .deck-stack{width:52px; height:78px;}
  .hand{padding:8px 2px 4px; min-height:76px;}
  .hand.poker{padding-top:18px;}
  .pcard{width:42px; height:60px;}
  .pcard .r{top:3px; left:5px; font-size:14px;}
  .pcard .s{top:20px; left:5px; font-size:11px;}
  .pcard .big{font-size:36px;}
  .pcard.two .r{font-size:12px;}
  .rank-group .pcard + .pcard{margin-left:-18px;}
  .rank-group{margin-right:9px; padding-right:9px;}
  .bh-last{padding:10px 14px;}
  .banner{font-size:12px; padding:5px 12px;}
}