/* 掼蛋 — HTML椅子版 */
*{margin:0;padding:0;box-sizing:border-box}
:root{--red:#e74c3c;--blue:#3498db;--gold:#f1c40f;--bg:#0a0e1a;--txt:#eee;--txt2:#999}
html,body{height:100%;overflow-x:hidden}
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:var(--bg);color:var(--txt)}

/* 大厅 */
.hall{min-height:100vh;background:radial-gradient(ellipse at 50% 30%,#1a3220 0%,#0c1a0e 40%,#0a0e1a 100%);display:flex;flex-direction:column}
.hall-hdr{display:flex;align-items:center;padding:10px 24px;gap:16px;background:rgba(0,0,0,.5)}
.hall-logo{font-size:22px;font-weight:800;letter-spacing:3px;color:var(--gold);text-shadow:0 0 12px rgba(241,196,15,.3)}
.hall-online{font-size:12px;color:var(--txt2);margin-left:auto}
.hall-me{font-size:13px;color:var(--gold);font-weight:600}
.hall-body{flex:1;display:flex;justify-content:center;align-items:flex-start;gap:60px;flex-wrap:wrap;padding:30px 20px 60px}

/* 桌区 */
.tbl-area{display:flex;flex-direction:column;align-items:center;gap:12px}
.tbl-title{font-size:22px;font-weight:700;color:var(--gold);text-shadow:0 0 10px rgba(241,196,15,.25);letter-spacing:4px}
.tbl{position:relative;display:inline-block}
.tbl-4{width:400px;height:340px}
.tbl-6{width:480px;height:340px}
.tbl-svg{width:100%;height:100%;filter:drop-shadow(0 8px 30px rgba(0,0,0,.6))}
.tbl-tip{font-size:12px;color:var(--txt2)}.tbl-tip b{color:var(--gold)}

/* ===== HTML椅子 ===== */
.chair{
  position:absolute;z-index:10;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;
  width:60px;
  transition:transform .2s,filter .2s;
}
.chair:hover{transform:scale(1.18);filter:brightness(1.3) drop-shadow(0 0 12px rgba(255,255,255,.5))}
.chair:active{transform:scale(1.05)}

.chair-back{
  width:52px;height:14px;border-radius:7px 7px 2px 2px;
  margin-bottom:-2px;
}
.chair-seat{
  width:48px;height:42px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.5);
  position:relative;
}
.chair-label{
  color:#fff;font-size:12px;font-weight:700;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
  text-align:center;line-height:1.2;
}

/* 椅子颜色 */
.chair-red .chair-back{background:#C0392B}
.chair-red .chair-seat{background:linear-gradient(135deg,#E74C3C,#C0392B)}
.chair-blue .chair-back{background:#2471A3}
.chair-blue .chair-seat{background:linear-gradient(135deg,#3498DB,#2471A3)}
.chair-green .chair-back{background:#1E8449}
.chair-green .chair-seat{background:linear-gradient(135deg,#27AE60,#1E8449)}
.chair-orange .chair-back{background:#D35400}
.chair-orange .chair-seat{background:linear-gradient(135deg,#E67E22,#D35400)}
.chair-purple .chair-back{background:#7D3C98}
.chair-purple .chair-seat{background:linear-gradient(135deg,#9B59B6,#7D3C98)}
.chair-teal .chair-back{background:#117A65}
.chair-teal .chair-seat{background:linear-gradient(135deg,#1ABC9C,#117A65)}

/* 有人坐 */
.chair.taken{cursor:default}
.chair.taken:hover{transform:scale(1.05);filter:brightness(1.1)}
.chair.taken .chair-seat{box-shadow:0 0 16px rgba(241,196,15,.4)}
.chair.is-me .chair-seat{box-shadow:0 0 20px rgba(241,196,15,.7);border:2px solid var(--gold)}

/* 四人桌座位位置 */
.chair-top{top:-28px;left:50%;transform:translateX(-50%)}
.chair-right{top:50%;right:-34px;transform:translateY(-50%)}
.chair-bottom{bottom:-28px;left:50%;transform:translateX(-50%)}
.chair-left{top:50%;left:-34px;transform:translateY(-50%)}

/* 六人桌座位位置 */
.chair-6tl{top:-28px;left:28%;transform:translateX(-50%)}
.chair-6tr{top:-28px;left:72%;transform:translateX(-50%)}
.chair-6r{top:50%;right:-34px;transform:translateY(-50%)}
.chair-6br{bottom:-28px;left:72%;transform:translateX(-50%)}
.chair-6bl{bottom:-28px;left:28%;transform:translateX(-50%)}
.chair-6l{top:50%;left:-34px;transform:translateY(-50%)}

/* 弹窗 */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:900}
.nick-box{background:#1a2538;border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:28px 32px;width:340px;text-align:center;box-shadow:0 12px 50px rgba(0,0,0,.6)}
.nick-box h3{margin-bottom:18px;font-size:18px;color:var(--gold)}
.nick-box input{width:100%;padding:10px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:#0d1520;color:#fff;font-size:15px;outline:none;margin-bottom:14px}
.nick-box input:focus{border-color:var(--gold)}
.avatar-pick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:18px}
.av-item{padding:8px 0;border-radius:8px;border:2px solid transparent;cursor:pointer;text-align:center;background:rgba(255,255,255,.04);transition:all .15s}
.av-item:hover{border-color:rgba(241,196,15,.4)}
.av-item.picked{border-color:var(--gold);background:rgba(241,196,15,.1)}
.av-item .av-e{font-size:26px}
.av-item .av-n{font-size:10px;color:var(--txt2);margin-top:2px}
.nick-btns{display:flex;gap:10px;justify-content:center}
.btn-c,.btn-g{padding:10px 28px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer}
.btn-c{background:#333;color:#aaa}
.btn-g{background:linear-gradient(135deg,var(--red),#a93226);color:#fff}
.btn-g:disabled{background:#444;color:#666;cursor:not-allowed}

/* 倒计时 */
.cd-wrap{text-align:center}
.cd-num{font-size:130px;font-weight:900;background:linear-gradient(135deg,#ffd93d,#ff6b6b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:cdp .5s ease infinite alternate}
.cd-txt{font-size:18px;color:var(--txt2);margin-top:8px}
@keyframes cdp{0%{transform:scale(1)}100%{transform:scale(1.1)}}

/* Toast */
.toast{position:fixed;top:60px;left:50%;transform:translateX(-50%);background:rgba(231,76,60,.92);color:#fff;padding:10px 28px;border-radius:22px;font-size:14px;font-weight:600;z-index:9999}

/* 游戏页面 */
.game-wrap{width:100vw;height:100vh;display:flex;flex-direction:column;background:radial-gradient(ellipse at center,#1e5631 0%,#0d2818 70%,#081c10 100%)}
.game-top{display:flex;justify-content:space-between;align-items:center;padding:8px 20px;background:rgba(0,0,0,.45);backdrop-filter:blur(8px);font-size:13px;flex-shrink:0}
.gt-team{padding:4px 14px;border-radius:14px;font-weight:600}
.gt-red{background:rgba(231,76,60,.18);color:#ff7979}
.gt-blue{background:rgba(52,152,219,.18);color:#74b9ff}
.gt-round{color:var(--gold);font-weight:600}
.game-field{flex:1;position:relative;overflow:hidden;min-height:0}
#opponents{position:absolute;inset:0}
.opponent{position:absolute;display:flex;flex-direction:column;align-items:center;gap:4px}
.opp-bar{display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.55);padding:5px 12px;border-radius:18px;backdrop-filter:blur(4px)}
.opp-bar.active{box-shadow:0 0 14px rgba(241,196,15,.55);border:1px solid var(--gold)}
.opp-bar .oa{font-size:18px}.opp-bar .on{font-size:12px;max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opp-bar .oc{background:var(--red);font-size:10px;padding:2px 6px;border-radius:10px;font-weight:700}
.opp-bar .ot{width:7px;height:7px;border-radius:50%}.ot-a{background:var(--red)}.ot-b{background:var(--blue)}
.opp-cards{display:flex}.opp-cards .cb{width:24px;height:36px;background:linear-gradient(135deg,#c0392b,#7b0000);border-radius:3px;border:1px solid rgba(255,255,255,.15);margin-left:-10px}.opp-cards .cb:first-child{margin-left:0}
.center-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:260px;min-height:100px;display:flex;align-items:center;justify-content:center}
#played-cards{display:flex;gap:3px;flex-wrap:wrap;justify-content:center;position:relative}
#played-cards .pi{position:absolute;top:-24px;left:50%;transform:translateX(-50%);font-size:12px;color:var(--gold);white-space:nowrap}
.game-msg{position:absolute;bottom:160px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.7);padding:7px 20px;border-radius:18px;font-size:14px;color:var(--gold);white-space:nowrap;z-index:5}
.my-zone{background:rgba(0,0,0,.5);backdrop-filter:blur(10px);padding:8px 16px 14px;border-top:1px solid rgba(255,255,255,.05);flex-shrink:0}
.my-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
#my-info-text{font-size:13px;color:var(--txt2)}
.my-btns{display:flex;gap:8px}
.gbtn{padding:8px 18px;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;color:#fff;transition:all .15s}
.gbtn-go{background:linear-gradient(135deg,var(--red),#a93226)}
.gbtn-warn{background:linear-gradient(135deg,var(--gold),#e67e22)}
.gbtn-sm{padding:6px 10px;font-size:12px;background:#333}
.gbtn:disabled{background:#444;color:#666;cursor:not-allowed}
.hand-row{display:flex;justify-content:center;gap:2px;min-height:90px;padding:6px 0;overflow-x:auto}
.card{width:56px;height:80px;background:#fff;border-radius:6px;border:1px solid #ccc;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .12s;user-select:none;box-shadow:0 2px 6px rgba(0,0,0,.25);flex-shrink:0}
.card:hover{transform:translateY(-8px)}.card.sel{transform:translateY(-18px);box-shadow:0 8px 20px rgba(231,76,60,.45);border-color:var(--red)}
.card .r{font-size:15px;font-weight:800;line-height:1}.card .s{font-size:18px;line-height:1}
.card.cred .r,.card.cred .s{color:#e74c3c}.card.cblk .r,.card.cblk .s{color:#222}
.card.jkb{background:linear-gradient(135deg,#e00,#f60)}.card.jks{background:linear-gradient(135deg,#222,#555)}
.card.jkb .r,.card.jks .r{color:#fff;font-size:11px}.card.jkb .s,.card.jks .s{color:#fff;font-size:22px}
.card-sm{width:40px;height:58px}.card-sm .r{font-size:11px}.card-sm .s{font-size:14px}
.chat-box{position:fixed;bottom:180px;right:0;width:260px;height:280px;background:rgba(0,0,0,.82);backdrop-filter:blur(8px);border-radius:10px 0 0 10px;border:1px solid rgba(255,255,255,.08);border-right:none;display:flex;flex-direction:column;z-index:100;transition:transform .3s}
.chat-hidden{transform:translateX(calc(100% - 34px))}
.chat-tab{position:absolute;left:-34px;top:8px;width:34px;height:34px;background:rgba(0,0,0,.8);border-radius:8px 0 0 8px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px}
.chat-inner{flex:1;display:flex;flex-direction:column;padding:8px;overflow:hidden}
.chat-list{flex:1;overflow-y:auto;font-size:12px;margin-bottom:6px}.chat-list .cm{margin-bottom:5px;line-height:1.3}.chat-list .cm b{color:var(--gold)}
.chat-send{display:flex;gap:4px}.chat-send input{flex:1;padding:5px 8px;background:#111;border:1px solid rgba(255,255,255,.1);border-radius:4px;color:#fff;font-size:12px;outline:none}
.go-mask{position:fixed;inset:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:500}
.go-box{background:#1c2940;padding:36px 44px;border-radius:14px;text-align:center;border:2px solid var(--gold)}
.go-box h2{font-size:28px;margin-bottom:12px}.go-box p{color:var(--txt2);margin-bottom:18px}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px}
@media(max-width:960px){.hall-body{flex-direction:column;align-items:center;gap:40px}.tbl-4{width:320px;height:280px}.tbl-6{width:400px;height:280px}.chair{width:50px}.chair-seat{width:40px;height:36px}.chair-back{width:44px;height:12px}.chair-label{font-size:10px}}