/* A constant message strip reserves space; expanded chat floats above the game. */
body.has-room-chat{--chat-dock-height:48px;padding-bottom:calc(var(--chat-dock-height) + 16px)}
body.has-room-chat:not(.room-chat-expanded){--chat-dock-height:48px}
#roomSocialDock{position:fixed;z-index:90;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:calc(8px + env(safe-area-inset-bottom) + var(--chat-keyboard,0px));max-width:1800px;margin:auto;color:#e9eddd}
#roomSocialDock [hidden]{display:none!important}
#roomSocialDock #roomSocialDrawer{position:relative;inset:auto;width:100%;height:var(--chat-dock-height);max-height:calc(var(--chat-visible-height,100dvh) - 16px);padding:9px 14px;gap:7px;border-color:#796d47;border-radius:13px;background:linear-gradient(115deg,#203528,#15251d);box-shadow:0 -7px 26px #0005}
#roomSocialDrawer>header{flex:0 0 auto;gap:12px;min-height:28px;border-bottom:1px solid #ffffff17;padding-bottom:5px}
#roomSocialDrawer .chat-tabs{display:flex;gap:7px;min-width:0}
#roomSocialDrawer .chat-tabs button{padding:5px 13px;min-height:28px;border-radius:6px;background:transparent;color:#afc2ac;white-space:nowrap;font-size:13px}
#roomSocialDrawer .chat-tabs button[aria-selected=true]{background:#e5c07c;color:#263220;font-weight:750}
#chatTurnHint{margin-left:auto;font-size:11px;color:#f7d391;text-align:right}
#chatClose{flex-shrink:0}
#chatConversation{display:flex;flex-direction:column;gap:5px;flex:1;min-height:0}
.chat-history{position:relative;flex:1;min-height:0}
#roomSocialDock #chatMessages{position:relative;height:100%;min-height:0;overflow:auto;padding:0 10px 0 2px;scrollbar-width:thin;scrollbar-color:#748662 #14261c;overflow-anchor:none}
#roomSocialDock #chatMessages article{display:flex;align-items:baseline;gap:12px;padding:5px 0;border:0;line-height:1.5}
#roomSocialDock #chatMessages small{flex:0 0 190px;font-size:12px;color:#c6b58b;overflow-wrap:anywhere}
#roomSocialDock #chatMessages time{font-size:10px;color:#99ac96;margin-left:5px}
#roomSocialDock #chatMessages p{font-size:14px;line-height:1.5;margin:0;min-width:0}
#roomSocialDock #chatMessages .chat-empty{color:#a4b79f;padding:12px 3px}
#chatNewMessages{position:absolute;bottom:3px;right:10px;border:1px solid #e7c27f;background:#405239;color:#fff0c1;box-shadow:0 3px 9px #0006;border-radius:20px}
#roomSocialDock #chatForm{flex:0 0 auto;gap:9px}#roomSocialDock #chatText{padding:7px 12px;font-size:14px;min-height:36px}#roomSocialDock #chatForm button{min-width:78px;padding:6px 16px}
#roomSocialDock #chatHint{font-size:10px;line-height:1.2;min-height:12px}
#chatRecords,#chatPeople{min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
#chatRecords p{font-size:13px;line-height:1.6;margin:6px 0;padding:4px 8px;background:#12221b55}#chatRecords small{color:#cfbc8b;margin-right:7px}.chat-record-heading{display:flex;justify-content:space-between;align-items:center;color:#adc2aa;font-size:12px}
#roomSocialDock #seatOptions,#roomSocialDock #chatManagement{max-height:none;overflow:visible}#chatPeople{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-content:start}#chatPeople #chatManagement{border-left:1px solid #ffffff20;padding-left:14px}#chatPeople:has(#chatManagement[hidden]){grid-template-columns:1fr}
#chatPreview{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;border:1px solid #796d47;border-radius:9px;background:#1d3326;box-shadow:0 -4px 16px #0004;padding:7px 12px;text-align:left;font-size:13px}
#chatPreview b{flex-shrink:0;color:#f0d199}#chatLatest{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1;color:#dce7d5}.chat-preview-action{color:#b9c8ab;font-size:12px;flex-shrink:0}
body.has-room-chat .toast{bottom:calc(var(--chat-dock-height) + 24px)}
@media(min-width:901px) and (min-height:601px){
 body.has-room-chat:has(.game-table){padding-bottom:0}
 body.has-room-chat .game-stage{height:calc(100dvh - 82px - var(--chat-dock-height));min-height:0}
 body.has-room-chat .game-stage>.intro{min-height:28px}
 body.has-room-chat .game-table{grid-template-columns:minmax(170px,1fr) minmax(0,3.1fr) minmax(170px,1fr)}
 body.has-room-chat .table-board.has-departure{grid-template-rows:minmax(0,1fr);padding:7px;row-gap:0}
 body.has-room-chat .table-board .panel-top,body.has-room-chat .departure-dock,body.has-room-chat .table-board .board-foot{display:none}
 body.has-room-chat .table-board .board{min-height:0;height:100%;grid-template-rows:repeat(7,minmax(0,1fr))}
 body.has-room-chat .player-rail{min-height:0}
 body.has-room-chat .seat-card{min-height:0;overflow:hidden}
 body.has-room-chat .seat-card .seat-finances{margin:2px 0}
 body.has-room-chat .seat-header{gap:6px}
 body.has-room-chat .market-center{overflow:auto;justify-content:center}
}
@media(min-width:901px) and (min-height:601px) and (max-height:900px){
 body.has-room-chat{--chat-dock-height:48px}
 body.has-room-chat .table-board .tile-icon,body.has-room-chat .market-center .center-orbit,body.has-room-chat .center-price-label,body.has-room-chat .center-chart,body.has-room-chat .center-change,body.has-room-chat .price-stages{display:none}
 body.has-room-chat .table-board .tile{padding:0;gap:0}body.has-room-chat .tile-label{font-size:15px}body.has-room-chat .tile-num{font-size:8px;top:2px;left:3px}
 body.has-room-chat .market-center .center-price{font-size:28px;margin:1px 0}
 body.has-room-chat .market-center .turn-bar{padding:4px 6px;margin-top:3px}body.has-room-chat .market-center .turn-bar .avatar{display:none}
 body.has-room-chat .seat-card .seat-ledger,body.has-room-chat .seat-card .seat-race-row{display:none}
 body.has-room-chat .seat-name strong{font-size:15px}body.has-room-chat .seat-card .seat-header .seat-name small{font-size:10px}
 body.has-room-chat .seat-finances strong{font-size:16px}body.has-room-chat .seat-finances span{font-size:10px;margin-bottom:1px}
 body.has-room-chat .seat-card:has(.seat-auction) .seat-finances>div:nth-child(n+3){display:none}
 body.has-room-chat .turn-auction-card{max-width:none;padding:6px 8px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:12px}
 body.has-room-chat .auction-card-top{grid-column:1/-1;font-size:11px;margin-bottom:3px}
 body.has-room-chat .turn-auction-card h2{grid-column:1;grid-row:2;font-size:17px;margin:3px 0;align-self:end}
 body.has-room-chat .turn-auction-card .auction-prize{grid-column:1;grid-row:3;font-size:11px;line-height:1.4}
 body.has-room-chat .turn-auction-high{grid-column:1;grid-row:4/6;padding:5px 0;margin:4px 0;justify-content:center}
 body.has-room-chat .turn-auction-high strong{font-size:26px}body.has-room-chat .turn-auction-high span{font-size:11px}body.has-room-chat .turn-auction-high small{display:none}
 body.has-room-chat .auction-turn-name{grid-column:2;grid-row:2;font-size:13px;margin:2px 0}
 body.has-room-chat .auction-round-actions{grid-column:2;grid-row:3/6;min-width:0}body.has-room-chat .auction-round-actions label{font-size:11px;margin:3px 0}
 body.has-room-chat .auction-round-actions input{height:30px;padding:4px;font-size:14px}
 body.has-room-chat .turn-bid-quick,body.has-room-chat .turn-bid-buttons{gap:4px;margin-top:4px}
 body.has-room-chat .turn-bid-quick button{font-size:11px;padding:3px 0;min-height:26px}body.has-room-chat .turn-bid-buttons button{font-size:12px;padding:5px 0;min-height:32px}
 body.has-room-chat .turn-auction-card .auction-turn-help{display:none}
}
@media(max-width:900px),(max-height:600px){
 body.has-room-chat{--chat-dock-height:40px;padding-bottom:48px}
 #roomSocialDock{left:max(6px,env(safe-area-inset-left));right:max(6px,env(safe-area-inset-right));bottom:calc(4px + env(safe-area-inset-bottom) + var(--chat-keyboard,0px))}
 #chatPreview{min-height:38px;padding:5px 10px;gap:8px;font-size:12px}#chatPreview b{font-size:11px}.chat-preview-action{font-size:11px}
 #roomSocialDock #roomSocialDrawer{height:min(66dvh,460px);min-height:0;padding:8px 11px;gap:5px}
 #roomSocialDrawer>header{min-height:27px;gap:6px;padding-bottom:4px}#roomSocialDrawer .chat-tabs{gap:3px}#roomSocialDrawer .chat-tabs button{font-size:12px;padding:4px 8px;min-height:27px}
 #roomSocialDock #chatMessages article{padding:4px 0;gap:8px}#roomSocialDock #chatMessages small{flex-basis:140px;font-size:11px}#roomSocialDock #chatMessages p{font-size:13px}
 #roomSocialDock #chatText{font-size:16px;min-height:34px;padding:5px 10px}#roomSocialDock #chatForm button{min-width:65px;padding:4px 10px;min-height:34px}
 #chatTurnHint{font-size:10px;max-width:130px}#roomSocialDrawer #chatClose{font-size:11px;min-height:27px;padding:3px 7px}
 body.has-room-chat .toast{bottom:52px}body.has-room-chat.room-chat-expanded .toast{bottom:calc(min(66dvh,460px) + 12px)}
 body.has-room-chat .mobile-rotate-hint{bottom:46px}
}
@media(orientation:landscape) and (max-height:600px) and (max-width:1100px){
 body.has-room-chat:has(.game-table){padding-bottom:0}
 body.has-room-chat .game-stage{height:calc(100dvh - 82px - env(safe-area-inset-bottom));min-height:0}
 body.has-room-chat .game-table{gap:4px}
 body.has-room-chat .market-center .turn-bar{margin-top:1px;padding:2px 4px}
 body.has-room-chat .market-center .center-price{font-size:21px;margin:0}body.has-room-chat .market-center .race-goal{font-size:12px}
 body.has-room-chat .center-trades{margin-top:2px}body.has-room-chat .market-center .roll-btn{margin-top:2px;min-height:28px;padding:3px}
 body.has-room-chat .turn-auction-card{padding:2px 4px;column-gap:5px}
 body.has-room-chat .turn-auction-card h2{font-size:12px;margin:0;line-height:1.1}
 body.has-room-chat .turn-auction-high{padding:2px 0;margin:2px 0}body.has-room-chat .auction-card-top{font-size:9px;margin-bottom:1px}
 body.has-room-chat .turn-auction-card .auction-prize{font-size:9px;line-height:1.15}
 body.has-room-chat .auction-round-actions input{height:25px}body.has-room-chat .turn-bid-quick button{min-height:23px;padding:2px 0}body.has-room-chat .turn-bid-buttons button{min-height:27px;padding:3px 0}
 body.has-room-chat .auction-turn-name{font-size:11px}body.has-room-chat .turn-bid-quick,body.has-room-chat .turn-bid-buttons{margin-top:2px}
}
@media(max-width:500px){#chatTurnHint{display:none}#roomSocialDock #chatMessages article{display:block}#roomSocialDock #chatMessages small{display:block}#chatPeople{grid-template-columns:1fr}#chatPeople #chatManagement{border-left:0;padding-left:0}}
@media(min-width:901px) and (min-height:601px) and (max-height:700px){
 body.has-room-chat .market-center .roll-btn{padding:5px;margin-top:3px;min-height:30px}
 body.has-room-chat .market-center .turn-bar{padding:2px 5px;margin-top:1px}
 body.has-room-chat .market-center .turn-bar strong{font-size:13px}
 body.has-room-chat .market-center .center-trades button{padding:4px;min-height:29px}
 body.has-room-chat .market-center .race-goal{font-size:15px}
 body.has-room-chat .turn-auction-card{padding:2px 5px}
 body.has-room-chat .turn-auction-card h2{font-size:14px;line-height:1.15}
 body.has-room-chat .auction-round-actions label{font-size:10px;margin:2px 0}
}
/* Cards keep priority; a single message strip remains visible below their controls. */
body.has-room-chat:has(#overlay:not(.hidden):not(.board-card-host)) #roomSocialDrawer{display:none!important}
body.has-room-chat:has(#overlay:not(.hidden):not(.board-card-host)) #chatPreview{display:flex!important}
body.has-room-chat:has(#overlay:not(.hidden):not(.board-card-host)) #chatPreview .chat-preview-action{display:none}
body.has-room-chat #overlay{padding-bottom:66px}
body.has-room-chat #overlay .modal{max-height:calc(100dvh - 82px)}
/* Expansion never changes the reserved strip height or the game geometry. */
#roomSocialDock #roomSocialDrawer{position:absolute;left:auto;right:0;top:auto;bottom:calc(var(--chat-dock-height) + 8px);width:min(460px,100%);height:min(480px,72dvh);max-height:calc(var(--chat-visible-height,100dvh) - var(--chat-dock-height) - 24px);padding:14px;gap:10px;border:1px solid #baa47188;border-radius:16px;background:linear-gradient(145deg,#293f30,#12271d);box-shadow:0 16px 50px #0009,0 0 0 1px #081b1288}
#roomSocialDrawer>header{flex-wrap:wrap;gap:5px 8px;padding-bottom:9px;align-items:center}#roomSocialDrawer .chat-tabs{flex:1}#roomSocialDrawer .chat-tabs button{padding:5px 8px;font-size:12px}#chatTurnHint{order:3;width:100%;text-align:left}#chatTurnHint:empty{display:none}#roomSocialDock #chatMessages article{display:block;padding:8px 2px}#roomSocialDock #chatMessages small{display:block;font-size:12px;margin-bottom:3px}#roomSocialDock #chatMessages p{font-size:15px;line-height:1.6}#chatPeople{grid-template-columns:1fr}#chatPeople #chatManagement{padding:10px 0 0;border-left:0;border-top:1px solid #ffffff20}#roomSocialDock #chatForm{gap:7px}#roomSocialDock #chatText{font-size:16px;min-height:40px}#roomSocialDock #chatForm button{min-width:62px;padding:7px 12px}#roomSocialDock #chatClose{font-size:12px;min-height:30px;padding:4px 6px}
@media(max-width:900px),(max-height:600px){#roomSocialDock #roomSocialDrawer{width:min(420px,100%);height:min(420px,72dvh);padding:10px;gap:6px;bottom:calc(var(--chat-dock-height) + 6px)}#roomSocialDrawer>header{padding-bottom:4px}#roomSocialDock #chatMessages article{padding:5px 1px}#roomSocialDock #chatMessages p{font-size:14px}#roomSocialDock #chatText{min-height:34px}#roomSocialDock #chatForm button{min-height:34px}body.has-room-chat.room-chat-expanded .toast{bottom:52px}}
@media(max-width:900px),(max-height:600px){body.has-room-chat:not(.room-chat-expanded){--chat-dock-height:40px}}

/* The room bar owns the entry and latest message; chat floats below that entry. */
body.has-room-chat,body.has-room-chat:not(.room-chat-expanded){--chat-dock-height:0px;padding-bottom:0}
#roomSocialDock{left:auto;bottom:auto;width:min(460px,calc(100vw - 16px));max-width:none;margin:0;pointer-events:none}
#roomSocialDock #roomSocialDrawer{position:relative;inset:auto;width:100%;height:min(500px,var(--chat-available-height,70dvh));max-height:var(--chat-available-height,70dvh);pointer-events:auto;box-shadow:0 14px 40px #0009;border-top:2px solid #d5b577}
.network-hud{flex-wrap:nowrap;min-width:0}
.network-hud>div{flex-wrap:nowrap;flex-shrink:0}
.network-hud #chatPreview{flex:1 1 0;min-width:0;width:auto;min-height:30px;margin:0 8px;padding:3px 12px;gap:9px;border:0;border-left:1px solid #b2c49a38;border-radius:0;background:none;box-shadow:none;font-weight:500}
.network-hud #chatLatest{font-size:13px;font-weight:550;color:#dce8d4;text-overflow:ellipsis;min-width:0}
.network-hud .chat-preview-symbol{color:#dcbf83;font-size:18px}
#roomChat{position:relative;white-space:nowrap;font-weight:700;padding:5px 10px}
#roomChat .chat-unread-badge{position:absolute;top:-5px;right:-7px;min-width:19px;height:19px;display:grid;place-items:center;padding:0 5px;border-radius:12px;border:2px solid #23352c;background:#d64e44;color:#fff;font:750 11px/1 system-ui;font-variant-numeric:tabular-nums}
#roomChat .chat-unread-badge[hidden]{display:none}
.game-stage>.intro.centered-game-goal{display:flex;justify-content:center;align-items:center;gap:16px}
#turnCountdown.turn-clock{display:inline-flex;align-items:center;justify-content:center;min-width:90px;height:38px;padding:0 12px;border:1px solid #a68a54;border-radius:9px;background:linear-gradient(145deg,#3d4830,#1b3024);box-shadow:inset 0 1px #d8c08430;color:#ffdb92;font:800 26px/1 ui-monospace,Consolas,monospace;letter-spacing:.04em;font-variant-numeric:tabular-nums}
#turnCountdown.turn-clock[hidden]{display:none}
#turnCountdown.turn-clock.is-urgent{color:#ffc3ad;border-color:#d77957;background:#542f25}
body.has-room-chat #overlay{padding-bottom:20px}
body.has-room-chat #overlay .modal{max-height:calc(100dvh - 40px)}
body.has-room-chat .toast,body.has-room-chat.room-chat-expanded .toast{bottom:20px}
body.has-room-chat .mobile-rotate-hint{bottom:8px}
@media(max-width:1200px){.network-hud #networkStatus{display:none}.network-hud>div{gap:8px}.network-hud #chatPreview{margin:0;padding:3px 8px}}
@media(max-width:900px),(max-height:600px){
 #roomSocialDock{width:min(420px,calc(100vw - 16px))}
 #roomSocialDock #roomSocialDrawer{height:min(450px,var(--chat-available-height,70dvh));bottom:auto}
 .network-hud #chatLatest{font-size:11px}.network-hud .chat-preview-symbol{font-size:14px}
 .game-stage>.intro.centered-game-goal{gap:10px}
 #turnCountdown.turn-clock{min-width:64px;height:24px;font-size:18px;padding:0 7px;border-radius:6px}
 #roomChat .chat-unread-badge{height:16px;min-width:16px;top:-4px;right:-5px;font-size:9px;padding:0 3px}
}
@media(orientation:landscape) and (max-height:600px) and (max-width:1100px){body.has-room-chat .game-stage{height:calc(100dvh - 40px - env(safe-area-inset-bottom))}.network-hud #chatPreview{padding:0 6px;min-height:22px}.network-hud>div{gap:5px}.network-hud #inviteRoom{font-size:0}.network-hud #inviteRoom::after{content:'邀请';font-size:10px}}
@media(max-width:600px) and (orientation:portrait){.network-hud{flex-wrap:wrap;gap:5px;padding:7px}.network-hud>div:first-child{flex:1}.network-hud>div:last-child{gap:5px}.network-hud .watch-count{display:none}.network-hud #chatPreview{order:3;flex-basis:100%;min-height:24px;border-left:0;border-top:1px solid #b2c49a28}.network-hud .quiet{font-size:11px;padding:3px}.lobby-room-bar>div:last-child{flex-wrap:wrap}.centered-game-goal .round-chip .race-label{font-size:11px}}
.network-hud #roomChat,.network-hud #roomAudience,.network-hud #inviteRoom,.network-hud #onlineMenu{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:15px;font-weight:700;min-height:34px;padding:5px 9px;white-space:nowrap}
.chat-room-icon{width:21px;height:21px;flex:none;color:#e7c483}
.network-hud #roomAudience{color:#ddc591}
#audienceList{min-width:0}#audienceList .audience-heading{display:flex;align-items:center;justify-content:space-between;padding:4px 0 12px;border-bottom:1px solid #ffffff20}.audience-heading strong{font-size:17px;color:#f3d699}.audience-heading span{font-size:12px;color:#a9c2a7}#audienceList ul{list-style:none;padding:0;margin:0}#audienceList li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #ffffff10}#audienceList li>strong{font-size:15px;overflow-wrap:anywhere;min-width:0;flex:1}.audience-avatar{width:36px;height:36px;flex:none;display:grid;place-items:center;background:#435e3b;color:#f5d58e;border:1px solid #ab976266;border-radius:10px;overflow:hidden;font-weight:700}.audience-avatar .player-photo{width:100%;height:100%;display:grid;place-items:center}.audience-online{font-size:11px;color:#95c2a1;white-space:nowrap}.audience-empty{font-size:14px;line-height:1.8;color:#b5c6ad;padding:16px 0}
@media(max-width:1200px){.network-hud #roomChat,.network-hud #roomAudience,.network-hud #inviteRoom,.network-hud #onlineMenu{font-size:13px;padding:4px 6px;gap:5px;min-height:30px}.chat-room-icon{width:18px;height:18px}}
@media(max-width:900px),(max-height:600px){.network-hud #roomChat,.network-hud #roomAudience,.network-hud #inviteRoom,.network-hud #onlineMenu{font-size:12px;padding:3px 5px;gap:4px;min-height:27px}.chat-room-icon{width:17px;height:17px}}
@media(orientation:landscape) and (max-height:600px) and (max-width:1100px){.network-hud #inviteRoom{font-size:0}.network-hud #inviteRoom::after{font-size:12px}}