/* Landscape phones: spend pixels on the tiles and people, not empty felt. */
@media(orientation:landscape) and (max-height:600px){
  :root{--phone-left:max(14px,env(safe-area-inset-left,0px));--phone-right:max(14px,env(safe-area-inset-right,0px));--hand-zone:90px}
  .topbar{height:40px;padding-left:max(36px,calc(env(safe-area-inset-left,0px) + 10px));padding-right:max(20px,calc(env(safe-area-inset-right,0px) + 10px))}
  .topbar .connection{display:none}.topbar .wordmark{font-size:21px;letter-spacing:3px}.topbar .wordmark span{display:none}
  .topbar nav{gap:5px}.topbar .icon-button{font-size:13px;min-height:32px;padding:5px 7px;white-space:nowrap}
  body.chat-open{--chat-reserve:clamp(190px,25.8vw,224px)}
  .game,.chat-open .game{--play-width:calc(100vw - var(--chat-reserve,0px));--board-size:min(210px,calc(100dvh - 206px),calc(var(--play-width) - var(--phone-left) - 14px - 244px));--discard-size:clamp(16px,calc(var(--board-size)*.096),20px);--river-length:calc(var(--discard-size)*4 + 3px);padding:60px 14px calc(var(--hand-zone) + 8px) var(--phone-left);min-height:calc(100dvh - 40px)}
  body:not(.chat-open) .game{--chat-reserve:0px;padding-right:var(--phone-right)}
  .game-toolbar{left:var(--phone-left);right:14px;height:26px;font-size:12px}.game-toolbar>div{gap:8px}.game-toolbar .text-button{font-size:12px;padding:4px 6px}
  .game-toolbar #base-label{display:none}
  .table-scene{margin-top:0}.table{border-width:4px;border-radius:12px}
  .seat,.chat-open .seat-left,.chat-open .seat-right{font-size:14px;padding:4px 5px;gap:5px;max-width:112px}
  .seat .avatar,.chat-open .seat-left .avatar,.chat-open .seat-right .avatar{width:28px;height:28px}
  .seat .avatar-face{font-size:22px}.seat-name,.chat-open .seat-left .seat-name,.chat-open .seat-right .seat-name{max-width:68px}
  .seat-score{font-size:13px;line-height:1.25;margin-top:2px}.player-kind{font-size:9px;padding:2px}.dealer{font-size:11px}
  .seat-top{top:-60px;width:max-content;max-width:230px;padding:2px 6px;white-space:nowrap}.seat-top .seat-name{display:inline-block;max-width:96px;vertical-align:middle}.seat-top .seat-score{display:inline;margin-left:6px}
  .game-toolbar>div:first-child{flex-direction:column;align-items:flex-start;gap:0;font-size:11px}
  .seat-left,.chat-open .seat-left{right:calc(100% + 24px)}.seat-right,.chat-open .seat-right{left:calc(100% + 24px)}
  .opponent-top{display:flex;top:-22px}.opponent-top .tile{--tw:16px;height:19px;border-bottom-width:2px}
  .opponent-side.left{left:-21px}.opponent-side.right{right:-21px}.opponent-side .tile{--tw:17px;height:10px}
  .melds-left,.chat-open .melds-left{right:calc(100% + 24px);top:calc(50% - 75px);max-width:112px}
  .melds-right,.chat-open .melds-right{left:calc(100% + 24px);top:calc(50% - 75px);max-width:112px}
  .melds-top{left:calc(50% + 83px);top:-28px;max-width:100px}.melds .tile{--tw:17px}
  .rivers{inset:4px}.river{grid-template-columns:repeat(4,var(--discard-size));max-height:calc((var(--board-size) - 16px - var(--river-length))/2)}
  .river-top,.river-bottom{width:var(--river-length)}
  .river-left,.river-right{grid-template-columns:none;grid-template-rows:repeat(4,var(--discard-size));height:var(--river-length);max-width:calc((var(--board-size) - 16px - var(--river-length))/2);max-height:none}
  .table-center{width:64px;height:57px}.table-center #wind{font-size:21px}.table-center b{font-size:12px}.table-center #countdown{font-size:11px}
  .hand-area,.chat-open .hand-area{position:fixed;left:var(--phone-left);right:var(--phone-right);bottom:max(8px,env(safe-area-inset-bottom,0px));height:var(--hand-zone);padding:0;z-index:10}
  .hand-heading{height:32px;width:calc(100vw - var(--chat-reserve,0px) - var(--phone-left) - var(--phone-right))}.self-seat{font-size:14px;padding:3px 9px;gap:7px}.self-seat .avatar{width:26px;height:26px}.self-seat .seat-score{font-size:14px}.self-seat .seat-name{max-width:none}
  .tiles-row,.chat-open .tiles-row{height:58px;min-height:0;padding-top:0;gap:8px;max-width:100%}.hand,.chat-open .hand{gap:2px}
  .hand .tile,.chat-open .hand .tile{--tw:min(44px,calc((100vw - var(--phone-left) - var(--phone-right) - 40px)/14));max-width:none;max-height:none}
  .hand .tile.selected,.hand .tile:hover:not(:disabled){transform:none}
  .hand .tile.drawn,.chat-open .hand .tile.drawn{margin-left:8px}
  .self-melds,.chat-open .self-melds{gap:3px}.self-melds .tile,.chat-open .self-melds .tile{--tw:23px}
  .controls,.chat-open .controls{top:calc(60px + var(--board-size)*.5 + 32px);left:calc(50% + var(--board-size)*.5 + 24px);right:14px;gap:5px}
  .turn-copy #status{font-size:12px;line-height:1.4}.actions,.chat-open .actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
  .action,.chat-open .action{font-size:13px;min-height:32px;padding:4px}.action .tile,.chat-open .action .tile{--tw:13px;margin-left:2px}
  .chat-open .chat-panel{top:44px;bottom:calc(var(--hand-zone) + 17px + env(safe-area-inset-bottom,0px));width:calc(var(--chat-reserve) - max(8px,env(safe-area-inset-right,0px)) - 8px)}
  .chat-header h2{font-size:17px}.chat-message{font-size:13px}.chat-message b{font-size:12px}.chat-message time{font-size:10px}
  .home{min-height:calc(100dvh - 40px);height:auto;overflow:visible}
  .home-content{min-height:0;align-items:start;grid-template-columns:minmax(180px,.8fr) minmax(260px,1fr);gap:12px 26px;padding:20px max(36px,calc(env(safe-area-inset-right,0px) + 14px)) 30px max(52px,calc(env(safe-area-inset-left,0px) + 18px))}
  .home h1{font-size:clamp(36px,6vw,55px)!important;letter-spacing:7px;margin:12px 0 2px}.home h1 span{font-size:.52em;letter-spacing:8px;margin-top:10px}
  .home .seal{font-size:12px;letter-spacing:2px}.home .lead{font-size:13px;letter-spacing:0;line-height:1.7;margin:8px 0}.hero-tiles{display:none}
  .play-panel{align-self:start;min-width:0;padding:18px}.play-panel input{font-size:16px;margin-bottom:12px;padding:10px}.play-panel>.primary{padding:10px 14px;font-size:17px;letter-spacing:1px}.divider{margin:14px 0}.secondary{font-size:13px;padding:10px 6px}.smallprint{font-size:11px;margin:14px 0 0}.legal-links{font-size:11px;line-height:1.8;overflow-wrap:anywhere}#join-form{margin-top:14px}
}

/* Small landscape screens remain readable by scrolling instead of clipping. */
@media(orientation:landscape) and (max-height:359px),(orientation:landscape) and (max-width:640px) and (max-height:600px){
  body.chat-open{--chat-reserve:0px}
  .chat-open main{margin-right:0}
  .game,.chat-open .game{--board-size:min(178px,calc(100vw - var(--phone-left) - var(--phone-right) - 244px));padding-right:var(--phone-right);padding-bottom:12px;min-height:0}
  .hand-area,.chat-open .hand-area{position:relative;left:auto;right:auto;bottom:auto;margin-top:12px;width:100%}
  .hand-heading{width:100%}.hand .tile,.chat-open .hand .tile{--tw:min(38px,calc((100vw - var(--phone-left) - var(--phone-right) - 64px)/14))}
  .chat-open .chat-panel{position:relative;top:auto;right:auto;bottom:auto;width:auto;height:240px;margin:8px var(--phone-right) 18px var(--phone-left)}
  .home-content{grid-template-columns:minmax(120px,.65fr) minmax(220px,1fr);gap:18px}
  .topbar{padding-left:max(20px,calc(env(safe-area-inset-left,0px) + 10px));padding-right:var(--phone-right)}
  .topbar .wordmark{font-size:19px;letter-spacing:2px}.topbar nav{gap:3px}.topbar .icon-button{font-size:12px;padding:5px}
}