/* Pixel-sized touch layout; original desktop styles are left intact. */
html.bg-phone{height:100%;overflow:hidden}.bg-phone body{position:fixed;top:var(--bg-top,0px);left:var(--bg-left,0px);width:var(--bg-width,100vw);height:var(--bg-height,100dvh);overflow:hidden;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.bg-phone .mast{height:46px;min-height:46px;padding:1px 7px;gap:6px}.bg-phone .mast>span{display:none}.bg-phone .mast>a{font-size:12px;display:flex;align-items:center;min-height:44px}.bg-phone button,.bg-phone select{min-height:44px}.bg-phone button{font-size:13px;padding:6px 9px;touch-action:manipulation}.bg-phone button:hover:not(:disabled){transform:none}.bg-phone button:disabled{opacity:.6}
.bg-phone main{flex:1;min-height:0;width:100%;max-width:none;padding:4px;display:flex;flex-direction:column;margin:0;gap:4px;overflow:hidden}.bg-phone .title,.bg-phone footer{display:none}
.bg-phone #connection{flex:none;font-size:11px;line-height:1.3;margin:0;max-height:29px;overflow:auto;overflow-wrap:anywhere}
.bg-phone .scorebar{flex:none;grid-template-columns:minmax(0,1fr) 74px minmax(0,1fr);gap:3px;margin:0}.bg-phone .scorebar>div{padding:4px 5px;min-width:0}.bg-phone .playername{font-size:13px;line-height:1.2;overflow-wrap:anywhere}.bg-phone .stats{font-size:10px;line-height:1.3}.bg-phone .match{font-size:9px;line-height:1.3;letter-spacing:0}.bg-phone .disc{width:10px;height:10px;margin-right:4px}
.bg-phone #phonePlay{display:grid;grid-template-rows:minmax(130px,1fr) minmax(215px,44%);gap:4px;flex:1;min-height:0}
.bg-phone .table{display:flex;flex-direction:column;min-height:0;overflow:hidden;filter:none;border:1px solid #785840;border-radius:8px;background:#21191a}
.bg-phone #phoneBoardViewport{flex:1;min-height:0;overflow:hidden;touch-action:none;user-select:none}.bg-phone #board{width:100%;height:100%;touch-action:none}.bg-phone #board .point{touch-action:none}
.bg-phone #phoneZoomBar{flex:none;display:flex;justify-content:space-around;align-items:center;gap:4px;padding:2px}.bg-phone #phoneZoomLabel{font-size:12px;color:#ffda86}.bg-phone #phoneZoomBar button{font-size:12px;padding:4px 8px}
.bg-phone #phoneControls{display:flex;flex-direction:column;min-height:0;overflow:hidden;background:#211b1e;border:1px solid #685047;border-radius:8px;padding:5px;gap:3px}
.bg-phone .console{display:grid;grid-template-columns:minmax(0,1fr) 56px;gap:3px 5px;padding:0;flex:none}.bg-phone .turn{grid-column:1;min-width:0}.bg-phone #turnlabel{font-size:9px;letter-spacing:.5px;margin:0}.bg-phone #status{font:600 14px/1.2 'Segoe UI',sans-serif;margin:2px 0;max-height:50px;overflow:auto;overflow-wrap:anywhere}.bg-phone #direction{font-size:10px;line-height:1.2;max-height:26px;overflow:auto}
.bg-phone #dice{grid-column:1;gap:5px;flex-wrap:nowrap;max-width:none}.bg-phone .die{height:35px;width:35px;padding:6px;gap:2px;border-radius:6px;box-shadow:0 2px 0 #80694d}.bg-phone .die.used{opacity:.5;outline:1px dashed #e6bd77}
.bg-phone #cube{grid-column:2;grid-row:1/3;min-width:0;font-size:9px;line-height:1.2;overflow-wrap:anywhere;margin:0}.bg-phone #cube strong{font-size:20px;padding:4px;width:38px;margin-bottom:3px}
.bg-phone #phoneControls>.actions{display:flex;flex-wrap:wrap;gap:4px;margin:0;flex:none}.bg-phone #phoneControls>.actions button{flex:1;min-width:95px}.bg-phone #phoneControls>.actions button:disabled,.bg-phone #phoneControls>.actions button[hidden]{display:none}
.bg-phone .sourcecontrol{display:flex;align-items:center;gap:6px;font-size:11px;margin:0;flex:none}.bg-phone .sourcecontrol select{flex:1;min-width:0;width:100%;max-width:none;margin:0;font-size:13px;padding:5px}
.bg-phone .choices{min-height:0;overflow:auto;overscroll-behavior:contain;flex:1;align-content:start;gap:4px}.bg-phone .choices button{min-height:44px;flex:1;white-space:nowrap}.bg-phone .choices:empty{min-height:0}
.bg-phone #result{font-size:13px;line-height:1.3;min-height:0;max-height:100%;overflow:auto;margin:0;padding:8px}.bg-phone #result[hidden]{display:none}
.bg-phone dialog{width:calc(100% - 16px);max-width:660px;max-height:calc(var(--bg-height,100dvh) - 16px);padding:14px;overflow:auto;overscroll-behavior:contain;border-radius:12px}.bg-phone dialog h2{font-size:25px;margin:4px 0 12px}.bg-phone dialog label{font-size:13px}.bg-phone dialog input:not([type=checkbox]),.bg-phone dialog select{min-height:44px}.bg-phone .formgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.bg-phone .formgrid>*{min-width:0}.bg-phone #joinarea{flex-wrap:wrap;gap:5px}.bg-phone #joinarea label{flex:1;min-width:0}.bg-phone #joinarea input{width:100%}.bg-phone #setupform>.actions{position:sticky;bottom:0;padding:5px;background:#251d20;z-index:2}
.bg-phone #closeRules,.bg-phone #phoneMenuClose{position:sticky;bottom:0;display:block;margin:8px 0 0 auto;z-index:2;background:#a52d3b}
.bg-phone #phoneMenu .tools{display:flex;max-width:none;flex-wrap:wrap;justify-content:start;margin-bottom:12px}.bg-phone #phoneMenu #volume{width:130px;min-height:32px}.bg-phone #phoneMenu .viewcontrols{display:grid;gap:8px;padding-top:10px}.bg-phone #phoneMenu .viewcontrols>span{max-width:none}.bg-phone #phoneMenu .summary{max-height:130px;overflow:auto}.bg-phone #phoneMenu .roompanel{padding:10px;margin:10px 0}.bg-phone #phoneMenu .roomcode{font-size:26px}
.bg-phone.bg-landscape #phonePlay{grid-template-columns:minmax(0,1fr) minmax(280px,37%);grid-template-rows:minmax(0,1fr)}
.bg-phone.bg-landscape .scorebar{grid-template-columns:minmax(0,1fr) 150px minmax(0,1fr)}.bg-phone.bg-landscape .scorebar>div{padding:2px 6px}.bg-phone.bg-landscape .playername,.bg-phone.bg-landscape .stats{display:inline;margin-right:8px}
.bg-phone.bg-landscape .mast{height:44px;min-height:44px}.bg-phone.bg-landscape #phoneControls{gap:2px}.bg-phone.bg-landscape .console{grid-template-columns:minmax(0,1fr) 50px}.bg-phone.bg-landscape .die{width:30px;height:30px;padding:5px}
/* Landscape uses the full height for the board; status sits with the controls. */
.bg-phone.bg-landscape .table{display:grid;grid-template-columns:68px minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.bg-phone.bg-landscape #phoneZoomBar{flex-direction:column;justify-content:center;gap:6px;padding:3px}.bg-phone.bg-landscape #phoneZoomBar button{width:62px;font-size:11px;padding:4px}
.bg-phone.bg-landscape .scorebar{grid-template-columns:minmax(0,1fr) 60px minmax(0,1fr);gap:2px}.bg-phone.bg-landscape .scorebar>div{padding:3px}.bg-phone.bg-landscape .playername,.bg-phone.bg-landscape .stats{display:block;margin:0}.bg-phone.bg-landscape .playername{font-size:11px}.bg-phone.bg-landscape .stats{font-size:9px}.bg-phone.bg-landscape .match{font-size:8px}
.bg-phone .sourcecontrol:has(select:disabled){display:none}
.bg-phone #phoneControls:has(#result:not([hidden])) #dice,.bg-phone #phoneControls:has(#result:not([hidden])) #direction{display:none}
.bg-phone #phoneControls:has(#result:not([hidden])) #result{flex:1}
.bg-phone #phoneControls:has(#result:not([hidden])) .choices{display:none}