/* Mobile layout: generous hand tiles, stable touch targets and safe areas. */
body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom)}
button{touch-action:manipulation}
dialog{max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain}
@media(max-width:620px),(max-width:1000px) and (max-height:600px) and (orientation:landscape){
 header{height:auto;min-height:62px;padding:8px 12px;gap:8px;flex-wrap:wrap}
 .brand{font-size:19px;gap:7px;letter-spacing:1px}.brand small{display:none}.logo{width:29px;height:37px;font-size:24px}
 nav{gap:4px;margin-left:auto}nav button{min-height:44px;padding:8px;font-size:13px}
 main{padding:0 10px;min-width:0}.mode{display:none}
 .table-top{padding:8px 3px;font-size:12px}.table-top>span:first-child{display:none}.table-top>span:last-child{margin-left:auto}
 .table{height:clamp(280px,40svh,360px);border-width:5px;border-radius:45px;min-width:0}
 .rim{inset:8px;border-radius:35px}.table-mark{display:none}
 .player{gap:6px}.avatar{width:33px;height:33px;font-size:20px}.north{top:10px;gap:7px}.west{left:5px;top:40%;flex-direction:column}.east{right:5px;top:40%;flex-direction:column}
 .player-info{font-size:12px}.player-info small{font-size:11px;margin-top:4px}.west .player-info,.east .player-info{max-width:54px}
 .backs{gap:1px;margin-top:4px}.back{width:7px;height:12px}.west .backs,.east .backs{display:none}
 .mini{max-width:50px;max-height:83px;overflow:auto;gap:2px}.mini .tile{width:14px;height:19px;border-radius:2px}
 .north .mini{position:absolute;left:calc(100% + 7px);top:0;width:48px;max-height:64px}
 .river{gap:2px;scrollbar-width:none;overscroll-behavior:contain;padding-bottom:3px}
 .river .tile{width:21px;height:28px;border-radius:2px}
 .r2,.r0{width:159px;left:calc(50% - 79.5px);max-height:61px}.r2{top:74px}.r0{bottom:11px}
 .r3,.r1{width:44px;top:44%;max-height:92px}.r3{left:60px}.r1{right:60px}
 .center{flex-direction:row;gap:6px;top:56%;width:128px;justify-content:center}
 .wind{width:58px;height:64px;grid-template-columns:10px 38px 10px;grid-template-rows:12px 40px 12px;font-size:12px;flex-shrink:0}.wind b{font-size:24px}.wind b small{font-size:9px}
 .last{width:64px;margin:0;flex-shrink:0}.last .tile{width:39px;height:52px;margin-top:5px}#lastLabel{font-size:11px}
 .bottom{padding:10px 2px 0;min-width:0}.status-line{display:flex;flex-wrap:wrap;gap:6px;min-height:45px}
 .me{min-width:115px;font-size:13px;gap:7px}.me .avatar{width:32px;height:32px;font-size:17px}#score{font-size:13px}
 #status{margin:5px 0;flex:1;min-width:120px;font-size:13px;line-height:1.5;text-align:right;overflow-wrap:anywhere}
 .actions{width:100%;flex-wrap:wrap;justify-content:center;gap:7px;margin:4px 0}.actions:empty{display:none}.actions button{min-height:44px;min-width:49px;font-size:15px;padding:9px 13px}
 .melds{flex-wrap:wrap;justify-content:center;gap:9px;margin:7px 0}.melds:empty{display:none}.melds .tile{width:24px;height:32px}
 .hand{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px 5px;max-width:378px;min-height:0;width:100%;margin:0 auto;padding:12px 3px 7px}
 .hand .tile{width:100%;height:auto;aspect-ratio:3/4;min-width:0;border-radius:5px;align-self:start}
 .hand .tile.drawn{margin-left:0;outline:2px solid #86d8b6;outline-offset:1px}.hand .tile.selected{outline:3px solid #ffd384;outline-offset:1px;box-shadow:0 4px 0 #aabca1,0 6px 5px #0005}
 .hand-footer{flex-direction:column;align-items:stretch;gap:8px;margin-top:8px}.hand-footer>span{max-width:none;text-align:center;font-size:12px;line-height:1.5}.hand-footer>div{display:grid;grid-template-columns:1fr 1.2fr;gap:10px}.hand-footer button{min-height:46px;font-size:16px;padding:10px}.hand-footer .primary{min-width:0}
 footer{margin:12px 12px 0;padding:12px 0;font-size:11px;gap:8px;flex-wrap:wrap;line-height:1.5}
 dialog{padding:46px 22px 24px;border-radius:16px;width:calc(100% - 24px)}dialog .close{width:44px;height:44px;top:5px;right:5px}dialog h2{font-size:26px}dialog p,dialog li{font-size:15px}dialog ul{padding-left:22px}
 .flash{font-size:60px}
}
@media(max-width:359px){
 header{padding:6px 8px;gap:4px}.brand{font-size:16px}.logo{display:none}nav button{padding:7px;font-size:12px}
 .r3{left:57px}.r1{right:57px}.r3,.r1{width:21px}.hand{gap:9px 4px}.hand-footer>span{font-size:11px}
}
@media(max-width:1000px) and (max-height:600px) and (orientation:landscape){
 header{min-height:48px;padding:2px 12px}.logo{width:26px;height:33px;font-size:22px}.brand{font-size:18px}nav button{min-height:40px;padding:6px 12px}
 main{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:14px;padding:6px 12px 0;align-items:start}
 .table-top{display:none}.table{height:calc(100svh - 94px);min-height:263px;max-height:460px;border-radius:36px}
 .bottom{padding:0;display:flex;flex-direction:column;gap:3px}.status-line{min-height:36px}.me .avatar{display:none}.me{min-width:103px}#status{font-size:12px;min-width:105px}
 .hand{max-width:330px;padding-top:7px;gap:8px 5px}.hand .tile{max-height:68px}.hand-footer{margin-top:4px;gap:4px}.hand-footer>span{font-size:11px}.hand-footer button{min-height:42px;padding:7px;font-size:14px}
 .actions{margin:0;gap:5px}.actions button{min-height:40px;padding:7px 10px;font-size:14px}
 .melds{margin:3px 0}.melds .tile{width:20px;height:27px}
 footer{margin:3px 12px 0;padding:5px 0;justify-content:space-between;font-size:10px}
}