:root{--bg:#06130f;--panel:#09231a;--panel2:#0d3023;--line:#214638;--ink:#edf7ef;--muted:#8ba79b;--gold:#e8c36b;--lime:#b9ed54;--red:#ef766d;--felt:#075641;--shadow:0 24px 70px rgba(0,0,0,.34);font-family:Inter,"Microsoft YaHei",sans-serif;color:var(--ink);background:var(--bg)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 45% 30%,#0b3023 0,transparent 34%),var(--bg)}button,input{font:inherit}button{border:1px solid var(--line);color:var(--ink);background:#102f25;min-height:40px;padding:0 16px;cursor:pointer}button:hover{border-color:#4e806b}.primary{background:var(--lime);color:#13250d;border-color:var(--lime);font-weight:800}.danger{background:#572721;border-color:#9b4941}.topbar{height:72px;padding:0 clamp(14px,4vw,56px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(4,18,13,.92);position:sticky;top:0;z-index:20}.brand{display:flex;gap:12px;align-items:center;color:inherit;text-decoration:none}.brand>span{width:38px;height:38px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--gold);font-family:Georgia;font-style:italic}.brand b,.brand small{display:block;letter-spacing:.18em}.brand b{font-size:12px}.brand small{color:var(--gold);font-size:7px;margin-top:3px}.top-actions{display:flex;gap:18px;align-items:center;font-size:12px;color:var(--muted)}.top-actions a{color:var(--gold)}main{width:min(1500px,100%);margin:auto}.landing{min-height:calc(100vh - 72px);display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:8vw;padding:8vw}.hero p,.chat-panel header span,.room-head small,.result-card>span{font-size:9px;letter-spacing:.28em;color:var(--gold);font-weight:800}.hero h1{font:400 clamp(58px,9vw,128px)/.9 Georgia,"STKaiti";margin:18px 0}.hero>span{font-size:18px;color:var(--muted)}.lobby-card{padding:34px;border:1px solid var(--line);background:rgba(8,33,24,.92);box-shadow:var(--shadow);display:grid;gap:18px}.lobby-card>.primary{height:58px}.join-row{display:grid;grid-template-columns:1fr auto}.join-row input{height:48px;background:#061b14;border:1px solid var(--line);color:var(--ink);padding:0 15px;text-transform:uppercase;letter-spacing:.2em}.lobby-card p{color:var(--muted);line-height:1.8;font-size:12px}.room-shell{padding:20px clamp(10px,2vw,30px) 40px}.room-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.room-head>div{display:flex;align-items:center;gap:10px}.room-head strong{font:26px Georgia;color:var(--gold);letter-spacing:.18em}.room-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px}.table-panel{min-height:calc(100vh - 135px);border:1px solid var(--line);background:#061d16;position:relative;overflow:hidden}.lobby-panel{width:min(720px,90%);margin:8vh auto;padding:36px;border:1px solid var(--line);background:var(--panel);text-align:center}.seat-list{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:30px 0}.seat{min-height:100px;border:1px solid var(--line);display:grid;place-items:center;padding:10px;color:var(--muted)}.seat.occupied{color:var(--ink);background:#102e24}.seat b,.seat small{display:block}.seat small{margin-top:5px;color:var(--gold)}.lobby-actions{display:flex;justify-content:center;gap:10px}.game-table{min-height:calc(100vh - 137px);padding:16px;background:radial-gradient(ellipse at center,#0b7055 0,#07513e 48%,#05241c 80%)}.status-line{min-height:38px;text-align:center;color:var(--gold);font-weight:700}.players{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;min-height:82px}.player{padding:10px;border:1px solid rgba(255,255,255,.16);background:rgba(2,24,17,.78);text-align:center;position:relative}.player.turn{outline:2px solid var(--lime);box-shadow:0 0 24px rgba(185,237,84,.25)}.player.me::after{content:"你";position:absolute;right:6px;top:6px;background:var(--lime);color:#14290c;padding:2px 5px;font-size:9px}.player b,.player span{display:block}.player span{color:var(--muted);font-size:11px;margin-top:4px}.center-board{min-height:280px;margin:14px auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;border:1px solid rgba(255,255,255,.10);border-radius:45%;padding:25px;background:rgba(2,39,29,.22)}.board-label{color:var(--gold);font-size:12px}.card-row,.tile-row,.meld-row,.discard-row{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}.card{width:54px;height:76px;border-radius:6px;background:#f7f4e9;color:#162018;border:2px solid transparent;padding:5px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;font-weight:900;box-shadow:0 5px 12px rgba(0,0,0,.22)}.card.red{color:#b72c2c}.card.selected,.tile.selected{transform:translateY(-12px);border-color:var(--lime);box-shadow:0 0 18px rgba(185,237,84,.6)}.card small{font-size:17px}.card.joker{justify-content:center;align-items:center;font-size:12px}.hand-area{padding:10px 8px 0;border-top:1px solid rgba(255,255,255,.12)}.hand-title{display:flex;justify-content:space-between;color:var(--muted);font-size:11px}.hand{min-height:90px;display:flex;align-items:flex-end;justify-content:center;overflow-x:auto;padding:16px 8px 4px}.hand .card{margin-left:-18px;flex:0 0 54px}.hand .card:first-child{margin-left:0}.tile{width:43px;height:58px;padding:4px;border-radius:4px;background:#f1ead0;color:#18241c;border:2px solid #d9caa3;display:grid;place-items:center;font:700 18px Georgia,"STKaiti";box-shadow:0 4px 8px rgba(0,0,0,.25)}.hand .tile{flex:0 0 43px}.tile.honor{color:#a42e2c}.controls{min-height:54px;display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;padding-top:8px}.controls button{min-width:90px}.chat-panel{border:1px solid var(--line);background:rgba(5,25,18,.96);display:grid;grid-template-rows:auto 1fr auto auto;min-height:calc(100vh - 135px);padding:20px}.chat-panel h2{font:26px Georgia;margin:8px 0 14px}.chat-list{overflow-y:auto;max-height:calc(100vh - 330px)}.chat-item{margin:9px 0;padding:10px;background:#102c22;border-radius:0 8px 8px 8px;font-size:12px}.chat-item b{color:var(--lime);display:block;margin-bottom:5px}.emoji-row{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.emoji-row button{padding:0}.chat-panel form{display:grid;grid-template-columns:1fr auto;margin-top:8px}.chat-panel input{min-width:0;background:#061812;border:1px solid var(--line);color:var(--ink);padding:0 10px}.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);opacity:0;background:#172f26;border:1px solid var(--line);padding:12px 20px;transition:.2s;z-index:50}.toast.visible{opacity:1;transform:translate(-50%,0)}dialog{border:1px solid var(--line);background:#071d15;color:var(--ink);padding:0;box-shadow:var(--shadow);width:min(560px,calc(100% - 24px))}dialog::backdrop{background:rgba(0,0,0,.7)}.result-card{padding:34px}.result-card h2{font:40px Georgia;margin:10px 0}.result-card>div:last-child{display:flex;justify-content:flex-end;gap:8px;margin-top:25px}.result-list{display:grid;gap:8px}.result-row{display:flex;justify-content:space-between;padding:10px;border-bottom:1px solid var(--line)}
.bot-picker{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}.bot-picker span{color:var(--muted);font-size:12px}.bot-picker .expert{border-color:var(--gold);color:var(--gold);box-shadow:0 0 18px rgba(232,195,107,.12)}.remove-bot{display:block;min-height:28px;margin:8px auto 0;padding:0 9px;font-size:10px;color:var(--red);border-color:#663a35;background:transparent}
@media(max-width:900px){.landing{grid-template-columns:1fr;padding:50px 20px}.room-grid{grid-template-columns:1fr}.chat-panel{min-height:420px}.chat-list{max-height:260px}.table-panel,.game-table{min-height:680px}.players{grid-template-columns:repeat(2,1fr)}.seat-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.topbar{height:58px;padding:0 10px}.brand>span{width:32px;height:32px}.top-actions{gap:8px}.top-actions #connectionState{display:none}.room-shell{padding:8px}.room-head{align-items:flex-start}.room-head>div{gap:5px;flex-wrap:wrap}.room-head strong{font-size:20px}.table-panel,.game-table{min-height:620px}.game-table{padding:8px}.center-board{min-height:210px;border-radius:28%;padding:12px}.card{width:46px;height:66px}.hand .card{flex-basis:46px;margin-left:-20px}.tile{width:36px;height:50px;font-size:15px}.hand .tile{flex-basis:36px;margin-left:-4px}.controls{position:sticky;bottom:0;background:rgba(4,25,18,.94);padding:8px;z-index:5}.controls button{min-width:72px;padding:0 9px}.chat-panel{padding:14px}.hero h1{font-size:62px}}