/* Phone landscape only: placement fixes so seats, melds, toolbar and controls never overlap.
   Sizes of tiles and text are unchanged on purpose (Simon TG13471). Desktop is not affected. */
@media(orientation:landscape) and (max-height:600px){
  /* Side players' melds: two per row, growing upward from just above the seat chip. */
  .melds-left,.chat-open .melds-left{width:max-content;max-width:150px!important}
  .melds-right,.chat-open .melds-right{width:max-content;max-width:150px!important;justify-content:flex-start}
  /* Opposite player's melds: two rows to the LEFT of the top seat chip (top-left of the table), right-aligned, never down the side. */
  .melds-top{left:auto!important;right:calc(100% + 16px)!important;top:-58px!important;bottom:auto!important;width:max-content;max-width:150px!important;flex-wrap:wrap;justify-content:flex-end}
  /* With the chat panel open the top-left corner holds the room toolbar, so the opposite melds sit right of the table, under the toolbar row. */
  .chat-open .melds-top{left:calc(100% + 8px)!important;right:auto!important;top:-58px!important;bottom:auto!important;width:max-content;max-width:150px!important;flex-wrap:wrap;justify-content:flex-start}
  /* ...and the invite / leave buttons move up into the empty part of the top bar to make room. */
}
@media(orientation:landscape) and (min-width:641px) and (min-height:360px) and (max-height:600px){
  .chat-open .game-toolbar>div:last-child{position:fixed;top:4px;left:calc(var(--phone-left) + 108px);height:32px;align-items:center;z-index:31}
}
/* Compact phones (chat sits below the table): free the top-left corner by moving the room info under the left seat. */
@media(orientation:landscape) and (max-height:359px),(orientation:landscape) and (max-width:640px) and (max-height:600px){
  .chat-open .melds-top{left:auto!important;right:calc(100% + 16px)!important;justify-content:flex-end}
}
/* Phone landscape: end-of-round dialog fits without scrolling — scores in two columns, buttons in one row. Same font sizes. */
@media(orientation:landscape) and (max-height:600px){
  #result-dialog{padding:14px 20px;max-height:calc(100dvh - 16px)}
  #result-dialog .eyebrow{margin:0}
  #result-dialog h2{margin:2px 0 6px}
  #result-scores{display:grid;grid-template-columns:1fr 1fr;column-gap:18px}
  #result-dialog .score-row{padding:7px 0;gap:10px}
  #result-dialog #result-note{margin:6px 0 2px}
  #result-dialog #next,#result-dialog #ai-result,#result-dialog .leave{display:inline-block;width:auto;margin:6px 6px 0;vertical-align:middle}
  #result-dialog{text-align:center}
  /* Reveal panel: long winner names wrap instead of hiding the 胡 badge. */
  #ceremony .cer-name{white-space:normal;line-height:1.2;overflow:visible}
}
/* Phone: the play/claim controls column is a compact fixed width instead of stretching to the screen edge (Simon TG13481). */
@media(orientation:landscape) and (max-height:600px){
  .controls,.chat-open .controls{right:auto!important;width:150px}
  .chat-open .controls{width:132px}
}
/* Phone with chat open (chat beside the table): give the chat every pixel the table does not need, so the table group moves left. */
@media(orientation:landscape) and (min-width:641px) and (min-height:360px) and (max-height:600px){
  body.chat-open{--chat-reserve:clamp(190px,calc(100vw - var(--phone-left) - min(210px,100dvh - 206px) - 330px),380px)}
  .chat-open .melds-left,.chat-open .melds-right{max-width:112px!important}
  /* symmetric side padding so the controls column (positioned from 50%) lines up with the centred table */
  .chat-open .game{padding-right:var(--landscape-gutter,14px)}
}
/* Phone (chat closed): rectangular table so the side rivers get more columns and the top/bottom rivers stay two rows but wider (Simon TG13487).
   Tile and text sizes unchanged. With chat open the table stays square so the chat keeps its width. */
@media(orientation:landscape) and (max-height:600px){
  .game{--board-w:clamp(var(--board-size),calc(100vw - var(--phone-left) - var(--phone-right) - 330px),calc(var(--board-size)*1.9))}
  .chat-open .game{--board-w:var(--board-size)}
  .table-scene,.chat-open .table-scene{width:var(--board-w)}
  .table,.chat-open .table{width:var(--board-w);height:var(--board-size);aspect-ratio:auto}
  .controls,.chat-open .controls{left:calc(50% + var(--board-w)*.5 + 24px)}
  .river-top,.river-bottom{width:min(calc(var(--discard-size)*12 + 11px),calc(var(--board-w) - 24px));grid-template-columns:repeat(auto-fill,var(--discard-size))}
  .river-left,.river-right{max-width:calc(var(--board-w)*.5 - 46px)}
  /* the room info moves under the left player's seat, freeing the top-left corner for the opposite player's melds */
  .game-toolbar>div:first-child{position:absolute;left:0;top:calc(var(--board-size)*.5 + 118px)}
  .game-toolbar>div:last-child{margin-left:auto}
}
/* Short phones (table under ~165px tall): side rivers use 3 rows so the top/bottom rivers keep two full rows. */
@media(orientation:landscape) and (max-height:370px){
  .game,.chat-open .game{--river-length:calc(var(--discard-size)*3 + 2px)}
  .river-left,.river-right{grid-template-rows:repeat(3,var(--discard-size))!important}
}