/* The enhanced layout is active only for a touch phone with an open puzzle. */
html.jigsaw-phone-playing{height:100%;overflow:hidden;overscroll-behavior:none}
html.jigsaw-phone-playing body{height:var(--jigsaw-visible-height,100dvh);min-height:0;overflow:hidden;overscroll-behavior:none}
html.jigsaw-phone-playing .site-header{display:none}
html.jigsaw-phone-playing #main,html.jigsaw-phone-playing #playView,html.jigsaw-phone-playing #boardMount{height:100%;min-height:0;min-width:0;max-width:none;margin:0;padding:0;overflow:hidden}
html.jigsaw-phone-playing .board-shell{display:grid;grid-template-rows:auto 48px minmax(0,1fr) 34px;gap:4px;height:100%;min-height:0;min-width:0;padding:max(3px,env(safe-area-inset-top)) max(4px,env(safe-area-inset-right)) max(3px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left));overflow:hidden}
html.jigsaw-phone-playing .board-heading{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:44px 14px;gap:2px 9px;min-width:0;min-height:0;margin:0;align-items:center}
html.jigsaw-phone-playing .board-heading>.button{min-height:44px;min-width:44px;height:44px;padding:5px 9px;font-size:12px;white-space:nowrap}
html.jigsaw-phone-playing .board-title{min-width:0}
html.jigsaw-phone-playing .board-title h2{font-size:17px;line-height:1.1;margin:0 0 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.jigsaw-phone-playing .board-title span{display:block;font-size:11px;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.jigsaw-phone-playing .board-progress{grid-column:1/3;display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;width:auto;text-align:left;line-height:1.1}
html.jigsaw-phone-playing .board-progress strong,html.jigsaw-phone-playing .board-progress span{font-size:11px;line-height:1.1;white-space:nowrap}
html.jigsaw-phone-playing .board-progress strong{overflow:hidden;text-overflow:ellipsis}
html.jigsaw-phone-playing .board-progress span{flex-shrink:0}
html.jigsaw-phone-playing .board-tools{display:flex;align-items:center;flex-wrap:nowrap;gap:5px;min-width:0;min-height:0;margin:0;padding:1px 1px 3px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x;scrollbar-width:thin;scrollbar-color:#a9926b #272d30;scroll-padding:6px}
html.jigsaw-phone-playing .board-tools button{flex:0 0 auto;min-height:44px;min-width:44px;height:44px;padding:5px 10px;font-size:12px;line-height:1.15;white-space:nowrap}
html.jigsaw-phone-playing .board-tools button[data-act=minus],html.jigsaw-phone-playing .board-tools button[data-act=plus]{font-size:22px;padding:4px}
html.jigsaw-phone-playing .board-tools button:focus-visible{outline-offset:-3px}
html.jigsaw-phone-playing .canvas-wrap{width:100%;height:100%;min-width:0;min-height:0;max-height:none;overflow:hidden;border-radius:7px;touch-action:none;overscroll-behavior:none}
html.jigsaw-phone-playing .canvas-wrap canvas{display:block;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none}
html.jigsaw-phone-playing .table-label{display:none}
html.jigsaw-phone-playing .board-status{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;min-width:0;min-height:0;height:34px;margin:0;padding:1px 2px;font-size:11px;line-height:1.35;overflow:hidden}
html.jigsaw-phone-playing #boardMessage{flex:1;min-width:0;max-height:32px;overflow:auto;overscroll-behavior:contain;touch-action:pan-y}
html.jigsaw-phone-playing #saveStatus{flex:0 0 auto;max-width:96px;max-height:32px;font-size:10px;line-height:1.25;text-align:right;overflow:auto;overscroll-behavior:contain;touch-action:pan-y}
html.jigsaw-phone-playing .board-options{position:fixed;z-index:30;top:calc(118px + env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));bottom:calc(42px + env(safe-area-inset-bottom));max-height:calc(var(--jigsaw-visible-height,100dvh) - 160px - env(safe-area-inset-top) - env(safe-area-inset-bottom));display:flex;align-content:flex-start;align-items:center;gap:10px 16px;padding:14px;margin:0;border:1px solid #a39374;border-radius:10px;background:#1e2325;box-shadow:0 8px 45px #000b;overflow:auto;overscroll-behavior:contain;touch-action:pan-y}
html.jigsaw-phone-playing .board-options label{min-height:44px;max-width:100%;font-size:13px;line-height:1.3;flex-wrap:wrap}
html.jigsaw-phone-playing .board-options label:has(select),html.jigsaw-phone-playing .board-options label:has(input[type=range]){flex:1 1 100%;justify-content:space-between}
html.jigsaw-phone-playing .board-options select{min-height:44px;max-width:min(185px,65%);font-size:13px}
html.jigsaw-phone-playing .board-options input[type=range]{width:min(185px,65%);min-height:44px}
html.jigsaw-phone-playing .board-options input[type=checkbox]{height:22px;width:22px}
html.jigsaw-phone-playing .board-options button{min-height:44px;min-width:44px;font-size:13px}
html.jigsaw-phone-playing .reference-window{top:31px;right:6px;width:210px;max-width:65%;max-height:calc(100% - 37px);border-radius:7px;overflow:auto;overscroll-behavior:contain;touch-action:pan-y}
html.jigsaw-phone-playing .reference-handle{min-height:44px;padding:0 4px 0 9px;font-size:12px}
html.jigsaw-phone-playing .reference-handle button{width:44px;height:44px;min-height:44px;padding:0;font-size:25px}
html.jigsaw-phone-playing .completion-card{max-height:calc(100% - 12px);padding:14px;overflow:auto;overscroll-behavior:contain;touch-action:pan-y}
html.jigsaw-phone-playing .completion-card h2{font-size:23px;margin:5px 0 12px}
html.jigsaw-phone-playing .completion-card p{font-size:13px;line-height:1.4}
html.jigsaw-phone-playing .completion-mark{font-size:30px}
html.jigsaw-phone-playing .completion-card button{min-height:44px;font-size:13px}
html.jigsaw-phone-playing dialog{position:fixed;top:calc(8px + env(safe-area-inset-top));bottom:auto;left:0;right:0;margin:0 auto;max-width:calc(100vw - 16px);max-height:calc(var(--jigsaw-visible-height,100dvh) - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain;touch-action:pan-y}
html.jigsaw-phone-playing .board-help{padding:22px}
html.jigsaw-phone-playing .board-help h2{font-size:25px}
html.jigsaw-phone-playing .board-help p{font-size:14px;line-height:1.5}
html.jigsaw-phone-playing dialog button{min-height:44px;min-width:44px}
html.jigsaw-phone-playing .notice{position:fixed;z-index:60;top:calc(8px + env(safe-area-inset-top));left:8px;right:8px;max-width:none;max-height:min(150px,40dvh);margin:0;padding:6px 10px;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;box-shadow:0 8px 30px #0008}
html.jigsaw-phone-playing button:disabled,html.jigsaw-phone-playing select:disabled{opacity:1;background:#2b3232;color:#c2c8c1;border-color:#737d74;border-style:dashed;box-shadow:none}

@media(orientation:landscape){
 html.jigsaw-phone-playing .board-heading{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:44px;gap:8px}
 html.jigsaw-phone-playing .board-progress{grid-column:auto;display:grid;gap:4px;max-width:245px;text-align:right}
 html.jigsaw-phone-playing .board-title h2{font-size:16px}
 html.jigsaw-phone-playing .board-title span{font-size:10px}
 html.jigsaw-phone-playing .board-options{top:calc(102px + env(safe-area-inset-top));max-height:calc(var(--jigsaw-visible-height,100dvh) - 144px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
 html.jigsaw-phone-playing .board-options label:has(select),html.jigsaw-phone-playing .board-options label:has(input[type=range]){flex-basis:calc(50% - 16px)}
 html.jigsaw-phone-playing .board-status{font-size:10px}
 html.jigsaw-phone-playing #saveStatus{max-width:210px}
}

@media(max-width:350px){
 html.jigsaw-phone-playing .board-heading{gap:2px 6px}
 html.jigsaw-phone-playing .board-heading>.button{padding:5px 7px;font-size:11px}
 html.jigsaw-phone-playing .board-title h2{font-size:15px}
 html.jigsaw-phone-playing .board-title span{font-size:10px}
 html.jigsaw-phone-playing .board-progress strong,html.jigsaw-phone-playing .board-progress span{font-size:10px}
}