/* Active only with mobile phone identity + coarse touch + phone screen. */
.parcheesi-phone body{position:fixed;top:var(--pt,0);left:0;width:var(--pw,100%);height:var(--ph,100dvh);min-height:0;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)}
.parcheesi-phone header{width:100%;flex:none;padding:2px 5px;gap:4px;flex-wrap:nowrap;height:48px}.parcheesi-phone .brand{font-size:11px;letter-spacing:.5px;gap:0}.parcheesi-phone .brandmark,.parcheesi-phone .brand small{display:none}.parcheesi-phone header nav{width:auto;flex:1;justify-content:space-evenly;gap:2px}.parcheesi-phone nav button{padding:4px;font-size:12px;min-width:44px}.parcheesi-phone button:disabled{opacity:1;color:#b6aa95;background:#322b23;border-color:#675a42}.parcheesi-phone button,.parcheesi-phone summary{min-height:44px}
.parcheesi-phone main{width:100%;flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;grid-template-rows:auto minmax(100px,1fr) auto;gap:5px;padding:4px;overflow:hidden}.parcheesi-phone aside{display:contents}.parcheesi-phone footer,.parcheesi-phone .table-caption,.parcheesi-phone .table-foot,.parcheesi-phone aside>section:not(.turncard),.parcheesi-phone aside>.history,.parcheesi-phone aside>#connection{display:none}
.parcheesi-phone .phone-hud{display:grid;grid-template-columns:minmax(0,1fr) auto 110px;align-items:center;gap:2px 7px;min-width:0}.parcheesi-phone #turnLabel{grid-row:1;grid-column:1;font-size:9px;letter-spacing:.6px}.parcheesi-phone #turnName{grid-column:1;grid-row:2;font:19px/1.1 Georgia;margin:0;overflow-wrap:anywhere}.parcheesi-phone #dice{grid-row:1/3;grid-column:2;gap:5px;margin:0}.parcheesi-phone .die{width:42px;height:42px;padding:8px;gap:2px;border-radius:7px}.parcheesi-phone #roll{grid-row:1/3;grid-column:3;font:13px/1.2 system-ui;padding:5px}.parcheesi-phone #message{grid-row:3;grid-column:1/-1;min-height:0;max-height:48px;overflow:auto;margin:3px 0;font:12px/1.3 system-ui}
.parcheesi-phone .table{grid-row:2;display:flex;flex-direction:column;min-height:0;width:100%;max-width:none;margin:0;gap:4px}.parcheesi-phone #boardWrap{flex:1;min-height:0;position:relative;overflow:hidden;filter:none;background:#2b2018;border:1px solid #ab8f59;border-radius:7px;touch-action:none;overscroll-behavior:contain}.parcheesi-phone #board{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;touch-action:none;user-select:none}.parcheesi-phone .phone-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}.parcheesi-phone .phone-tools button{padding:4px;font:12px/1.2 system-ui}.parcheesi-phone #pzFollow{grid-column:1/3}.parcheesi-phone #pzStatus{grid-column:1/-1;font:11px/1.2 system-ui;text-align:center;color:#ebd9af}
.parcheesi-phone .turncard{grid-row:3;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px;padding:5px;max-height:260px;min-height:0;overflow:hidden;border-radius:7px}.parcheesi-phone #remaining{grid-column:1/-1;font:12px system-ui}.parcheesi-phone #remaining br{display:none}.parcheesi-phone .portion{margin:1px 3px;padding:1px 6px}.parcheesi-phone .portions-label{font-size:11px}.parcheesi-phone #phoneUsed{grid-column:1/-1;font:11px system-ui}.parcheesi-phone .phone-portion{display:inline-block;padding:1px 6px;margin:0 2px;border:1px solid #c6ab68;border-radius:3px}.parcheesi-phone .phone-portion.used{color:#c7bdac;text-decoration:line-through;border-style:dashed}.parcheesi-phone .phone-portion.available{background:#f3d89c;color:#261d12;font-weight:700}.parcheesi-phone #pieces{grid-column:1;grid-row:auto;margin:2px 0;gap:4px;min-width:0}.parcheesi-phone .pieces button{min-width:44px;min-height:48px;padding:3px;font-size:15px}.parcheesi-phone .pieces small{font-size:10px;white-space:nowrap}.parcheesi-phone #phoneCancel{grid-column:2;font:12px/1.2 system-ui;padding:4px;max-width:73px}.parcheesi-phone #choices{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin:1px 0;overflow:auto;max-height:120px;min-height:0;overscroll-behavior:contain}.parcheesi-phone #choices button{font-size:12px;line-height:1.2;padding:6px;min-height:48px}.parcheesi-phone .turncard:has(#pieces:empty):has(#remaining:empty):has(#phoneUsed:empty){display:none}
.parcheesi-phone .pawn.phone-current .focus-ring{opacity:.7;stroke-width:2;stroke-dasharray:2 4}.parcheesi-phone .pawn.phone-selected .focus-ring,.parcheesi-phone .pawn.phone-moving .focus-ring{opacity:1;stroke:#1d1006;stroke-width:4;stroke-dasharray:7 3}.parcheesi-phone .pawn.phone-latest .focus-ring{opacity:1;stroke:#712424;stroke-dasharray:5 2;stroke-width:3}.parcheesi-phone .pawn text{font-weight:700}.parcheesi-phone .destination circle{stroke-dasharray:3 2;stroke-width:3}
.parcheesi-phone dialog{position:fixed;top:var(--pt,0);margin:auto;max-height:calc(var(--ph,100dvh) - 12px);padding:10px;width:min(650px,calc(100% - 12px));overscroll-behavior:contain}.parcheesi-phone .dialogtop{position:sticky;top:-10px;background:#352a20;z-index:5;padding:2px 0}.parcheesi-phone dialog h2{font-size:24px;margin:8px 0 12px}.parcheesi-phone .dialogtop h2{margin:0}.parcheesi-phone dialog label{margin:8px 0;font-size:13px}.parcheesi-phone dialog .seat-row{grid-template-columns:1fr 1fr;gap:4px}.parcheesi-phone dialog .seat-row label:first-of-type{grid-column:1/-1}.parcheesi-phone dialog input,.parcheesi-phone dialog select{font-size:16px!important}.parcheesi-phone dialog form>button[type=submit]{position:sticky;bottom:-10px;z-index:3}.parcheesi-phone #phoneTable .players{display:grid;grid-template-columns:1fr;gap:16px;padding:12px}.parcheesi-phone #phoneTable .history{display:block}.parcheesi-phone #phoneTable #lobby{display:block}.parcheesi-phone #phoneTable #lobby[hidden]{display:none}.parcheesi-phone #phoneTable #history{max-height:230px;overflow:auto}.parcheesi-phone #toast{bottom:10px;font:13px/1.3 system-ui;padding:10px;max-height:25%;overflow:auto}
@media(orientation:landscape){.parcheesi-phone main{grid-template-columns:minmax(0,1fr) 290px;grid-template-rows:auto minmax(100px,1fr)}.parcheesi-phone .phone-hud{grid-column:1/-1}.parcheesi-phone .table{grid-row:2;grid-column:1}.parcheesi-phone .turncard{grid-row:2;grid-column:2;max-height:none;align-content:start;overflow:auto}.parcheesi-phone .phone-tools{grid-template-columns:repeat(4,minmax(0,1fr))}.parcheesi-phone #pzFollow{grid-column:auto}.parcheesi-phone #pzMore{grid-column:1/3}.parcheesi-phone #pzStatus{grid-column:3/5;align-self:center}.parcheesi-phone #choices{grid-template-columns:1fr;max-height:140px}.parcheesi-phone #phoneUsed{font-size:10px}.parcheesi-phone #turnName{font-size:18px}.parcheesi-phone #message{max-height:32px}.parcheesi-phone .phone-hud{grid-template-columns:1fr 94px 170px}.parcheesi-phone .turncard:has(#pieces:empty):has(#remaining:empty):has(#phoneUsed:empty){display:grid}}
