/* Playable magnification stays separate from the fitted studio layout. */
.arcade #boardDetail{width:calc(100vw - 24px);max-width:1400px;height:calc(var(--play-height,100dvh) - 24px);max-height:calc(100dvh - 24px);padding:12px;overflow:hidden;border:2px solid #c3a66c;border-radius:10px;background:#173b43;color:#fff0cf;box-sizing:border-box}
#boardDetail[open]{display:flex;flex-direction:column;gap:10px}
#boardDetail::backdrop{background:#10272be8}
#boardDetail .detailHead{display:flex;gap:8px;flex:none;justify-content:center;align-items:center}
#boardDetail .detailHead button{display:flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:4px 10px;font:16px/1.2 Georgia,serif;color:#fff0cf;background:#254e56;border:1px solid #baa16d;border-radius:5px}
#boardDetail .detailWorkspace{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:12px;flex:1;min-height:0}
#detailViewport{overflow:auto;min-height:0;min-width:0;overscroll-behavior:contain;background:#0e2e36;border:1px solid #b49a66;border-radius:5px;scrollbar-color:#c4a366 #173b43}
#detailBoard{display:block;max-width:none;max-height:none;touch-action:auto;cursor:grab;user-select:none}
#detailBoard:active{cursor:grabbing}
#detailBasket{min-height:0;min-width:0;display:flex;flex-direction:column;gap:8px}
#boardDetail .detailSelection{display:flex;align-items:center;justify-content:center;gap:8px;flex:none;min-height:26px;color:#fff0cf}
#boardDetail #detailPiece{width:112px;height:112px;max-width:none;max-height:none;background:#f3e6c9;border-radius:5px}
#boardDetail .classicPieces{margin:0;display:flex;flex-direction:column;height:auto;min-height:0;flex:1;padding:5px;background:#c5a16d;border:1px solid #ac8c56;border-radius:6px}
#boardDetail .classicPieces .trayHead{display:flex;flex-wrap:wrap;gap:4px;flex:none;color:#382817;padding:0 4px;font-size:12px}
#boardDetail #boardDetailOpen{display:none}
#boardDetail .classicPieces #tray{display:flex;flex-wrap:wrap;align-content:flex-start;justify-content:center;gap:5px;overflow:auto;min-height:0;flex:1;margin:0;padding:6px;background:none;border:0;box-shadow:none;touch-action:none}
#boardDetail .pieceTile{width:76px;height:76px;flex:0 0 76px;min-height:76px;padding:0}
#boardDetail .pieceTile canvas{width:100%;height:100%}
#boardDetail #dragPreview{z-index:1000}
@media(max-width:600px){
 .arcade #boardDetail{width:calc(100vw - 12px);height:calc(var(--play-height,100dvh) - 12px);max-height:calc(100dvh - 12px);padding:6px;gap:6px}
 #boardDetail .detailHead{gap:4px}#boardDetail .detailHead button{font-size:13px;padding:4px 6px}
 #boardDetail .detailWorkspace{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 178px;gap:6px}
 #boardDetail #detailBasket{display:grid;grid-template-columns:96px minmax(0,1fr);gap:6px}
 #boardDetail .detailSelection{flex-direction:column;font-size:12px}#boardDetail #detailPiece{width:90px;height:90px}
 #boardDetail .classicPieces #tray{gap:4px}#boardDetail .pieceTile{width:62px;height:62px;min-height:62px;flex-basis:62px}
}

.classicViewport{position:relative}
.arcade #boardDetailOpen{position:absolute;z-index:2;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:76px;height:44px;min-height:44px;padding:4px 6px;font-size:12px;line-height:1.2;border:1px solid #d1b578;border-radius:5px;background:#193f48;color:#fff0cf;text-shadow:none;box-shadow:0 2px 4px #152f3666}
.arcade.puzzle-complete #boardDetailOpen{display:none}