/* Chat owns a separate column: controls and tiles never sit underneath it. */
body.chat-open{--chat-reserve:338px}
.chat-open main{margin-right:var(--chat-reserve)}
.chat-open .game{--board-size:min(520px,calc(100dvh - 368px),calc(100vw - var(--chat-reserve) - 400px))}
.chat-open .chat-panel{width:310px}
.chat-open .hand .tile{--tw:min(62px,calc((100vw - var(--chat-reserve) - 120px)/14))}
.chat-open .tiles-row{gap:8px;max-width:100%}
.chat-open .hand{flex-shrink:1}
.chat-open .controls{flex-wrap:wrap}
.chat-open .actions{min-width:0}
@media(orientation:landscape) and (max-height:600px){
  body.chat-open{--chat-reserve:clamp(218px,28vw,248px);--landscape-gutter:max(12px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px))}
  .chat-open .chat-panel{top:40px;right:max(8px,env(safe-area-inset-right,0px));bottom:max(8px,env(safe-area-inset-bottom,0px));width:calc(var(--chat-reserve) - max(8px,env(safe-area-inset-right,0px)) - 8px)}
  .chat-open .game{--board-size:min(420px,calc(100dvh - 159px),calc(100vw - var(--chat-reserve) - var(--landscape-gutter)*2 - 190px))}
  .chat-open .game-toolbar>div{gap:6px}
  .chat-open .seat-left,.chat-open .seat-right{max-width:76px;padding:3px;gap:3px}
  .chat-open .seat-left{right:calc(100% + 18px)}
  .chat-open .seat-right{left:calc(100% + 18px)}
  .chat-open .seat-left .seat-name,.chat-open .seat-right .seat-name{max-width:43px}
  .chat-open .seat-left .avatar,.chat-open .seat-right .avatar{width:20px;height:20px}
  .chat-open .melds-left{right:calc(100% + 18px);max-width:76px}
  .chat-open .melds-right{left:calc(100% + 18px);max-width:76px}
  .chat-open .controls{left:calc(50% + var(--board-size)*.5 + 18px);top:calc(40px + var(--board-size)*.5 + 28px);right:var(--landscape-gutter);gap:4px;flex-wrap:nowrap}
  .chat-open .actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}
  .chat-open .action .tile{--tw:10px;margin-left:2px}
  .chat-open .action{min-height:28px;padding:3px;font-size:11px}
  .chat-open .hand{gap:2px}
  .chat-open .hand .tile{--tw:min(32px,calc((100vw - var(--chat-reserve) - var(--landscape-gutter)*2 - 44px)/14))}
  .chat-open .hand .tile.drawn{margin-left:6px}
  .chat-open .self-melds{gap:3px}
  .chat-open .self-melds .tile{--tw:12px}
  .chat-open .chat-header{padding:7px 10px}
  .chat-open .chat-messages{padding:7px}
  .chat-open .chat-message{padding:6px 8px}
  .chat-open .chat-form{gap:4px;padding:6px}
  .chat-open .chat-form input{padding:7px}
  .chat-open .chat-form button{padding:7px}
}
@media(max-width:900px) and (orientation:portrait){.chat-panel{visibility:hidden;pointer-events:none}}